我正在建一个网站，里面有一个横幅。这个横幅在桌面和桌面移动视图中都很好用。但由于某种原因，当我在实际手机上打开网站时，它看起来不像在桌面手机视图中那样。我希望我的脸在中间，但我的脸却在左下角。
我在我的网站上遇到的另一个问题是，它旁边似乎有一个空白溢出，溢出-x：隐藏在体内无法修复。如果有任何帮助或想法，我们将不胜感激！：(
这是代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./css/about-style.css" rel="stylesheet" />
<title>Brian Wyann</title>
</head>
<body>
<!--NAVIGATION BAR-->
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
<ul class="navbar-nav navbar-light ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./project.html">Projects</a>
</li>
</ul>
<div class="burger navbar-center">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<a href="./contact.html" id="contact">
<button id="navbutton">Contacts</button>
</a>
</nav>
</header>
<!--BANNER-->
<section class="banner">
<h1 id="banner-text">Who Am I?</h1>
</section>
<!--PERSONAL-->
<div class="personal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies vulputate auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac volutpat lacus, a porta tellus. Nullam accumsan, massa eget condimentum convallis, mauris nunc efficitur augue, in dapibus risus diam euismod lorem. Ut non venenatis magna. Duis eget est aliquam sapien pretium molestie id eget felis. Praesent bibendum ultrices libero. Quisque sodales nulla dui, id iaculis dui dignissim sed. Nam iaculis erat interdum quam tincidunt, Donec viverra dignissim felis, sit amet luctus lacus gravida a. Pellentesque eu dapibus turpis.
</br></br>
Sed accumsan ligula cursus. Nullam ut auctor velit, nec maximus mauris. Nullam fermentum volutpat lorem ut eleifend. Aenean facilisis et nisl eget euismod. Curabitur vitae ligula quis dolor cursus euismod ac eu tellus.Cras finibus, libero et molestie rutrum, lorem felis dapibus tellus, a vehicula nulla diam eu ante. Sed euismod leo ligula. Maecenas ut neque metus. Etiam placerat neque sed justo tempus, at fermentum eros ornare. Duis facilisis metus a turpis blandit, a mollis ipsum malesuada.
</p>
</div>
<div class="about">
<div class="about-container">
<div class="family">
<h3><span>My Family</span></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus viverra.
</p>
</div>
<div class="hobbies">
<h3><span>My Hobbies</span></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus
</p>
</div>
</div>
</div>
<!--TRANSITION-->
<div class="transition"></div>
<!--FOOTER-->
<footer class="footer">
<div class="footer-col-left">
<div class="footer-container">
<a id="logobutton" href="index.html">
<h4 id="logo">BrianWyann</h4>
</a>
<div class="socials">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com/" target="blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://www.linkedin.com/feed/" target="blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<ul class="footer-col-right">
<li>
<h4>Myself</h4>
<ul class="box">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./project.html">Projects</a></li>
<li><a href="./contact.html">Contacts</a></li>
</ul>
</li>
<li class="mooc">
<h4>MOOCs</h4>
<ul class="box">
<li><a href="https://www.edx.org/" target="blank">edX</a></li>
<li>
<a href="https://www.coursera.org/" target="blank">Coursera</a>
</li>
<li>
<a href="https://www.futurelearn.com/" target="blank"
>FutureLearn</a
>
</li>
<li>
<a href="https://cognitiveclass.ai/" target="blank"
>CognitiveClass</a
>
</li>
</ul>
</li>
<li>
<h4>Address</h4>
<ul class="box">
<li>
<p>
C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
Jakarta, Indonesia
</p>
</li>
</ul>
</li>
</ul>
<div class="footer-row-bot">
<p>All right reserved by ©wyannbrian 2020</p>
</div>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
outline: none !important;
}
/*NAVIGATION BAR*/
header {
position: absolute;
z-index: 10;
width: 100%;
padding: 25px 5%;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand {
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
text-shadow: 1px 1px 3px black;
margin-right: 0;
}
.navbar-brand:hover {
color: rgba(202, 210, 197, 1);
}
.nav-item,
.nav-link {
font-size: 1.05em;
text-transform: uppercase;
font-weight: 800;
margin-right: 20px;
color: #cad2c5;
text-shadow: 1px 1px 5px black;
font-family: "Montaga", serif;
letter-spacing: 1px;
transition: all 0.5s;
}
.nav-link:hover {
background: #2f3e46;
color: #cad2c5;
}
#navbutton {
font-size: 1.05em;
text-transform: capitalize;
font-weight: 500;
font-family: "Montaga", serif;
letter-spacing: 1px;
padding: 9px 25px;
background: #cad2c5;
border: none;
border-radius: 50px;
transition: all 0.5s;
margin-left: 10px;
}
#navbutton:hover {
background: #2f3e46;
color: #cad2c5;
}
.burger div {
width: 25px;
height: 3px;
background: #cad2c5;
margin: 5px;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger {
display: none;
}
/* Make from burger icon to X icon */
.toggle #line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle #line2 {
opacity: 0;
}
.toggle #line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Animation for links */
@keyframes linkSlide {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*BANNER*/
.banner {
position: relative;
background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
url("../images/about/banner-img.JPG") center/cover no-repeat fixed;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#banner-text {
font-size: 6rem;
color: rgb(202, 210, 197);
letter-spacing: 2px;
text-shadow: 1px 1px 10px black;
font-family: "Dancing Script", cursive;
}
/* Mobile */
@media screen and (max-width: 992px) {
body {
overflow-x: hidden;
}
.navbar-nav {
position: absolute;
height: calc(95vh - 80px);
right: 0;
width: 100%;
top: 80px;
background: #354f52;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 100px 0px;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease-in;
}
.nav-item,
.nav-link {
margin-right: 0;
text-shadow: none;
}
.navbar-nav li a:hover {
color: #354f52;
background: #edf0f1;
padding: 10px 20px;
text-shadow: none;
}
.nav-item {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
.navbar-nav.mobilenav-active {
transform: translateX(0%);
opacity: 0.96;
}
#navbutton {
margin-left: 0;
}
#banner-text {
font-size: 5rem;
}
}
/*PERSONAL*/
.personal {
background: #425057;
margin: 0;
padding: 50px;
color: #EEF0F2;
position: relative;
line-height: 1.8;
font-family: "Roboto Slab", serif;
}
.personal p {
max-width: 1200px;
margin: auto;
font-size: 17px;
}
.about {
background: #425057;
padding: 20px 50px 50px 50px;
color: #EEF0F2;
line-height: 1.8;
font-family: "Roboto Slab", serif;
}
.about-container {
display: flex;
max-width: 1200px;
margin: auto;
}
.about-container h3 {
font-family: "Poppins", sans-serif;
text-align: center;
font-weight: 600;
color: #f5f5f5;
margin: auto;
position: relative;
z-index: 1;
margin-bottom: 20px;
letter-spacing: 1px;
word-spacing: 1px;
}
.about-container p {
text-align: justify;
font-size: 17px;
}
.hobbies{
margin-left: 50px;
}
.family{
margin-right: 50px;
}
.about-container h3::before {
content:"";
display: block;
width: 200px;
height: 2px;
background: #f5f5f5;
position: absolute;
left: 0;
top: 50%;
z-index: -1;
}
.about-container h3::after {
content:"";
display: block;
width: 200px;
height: 2px;
background: #f5f5f5;
position: absolute;
right: 0;
top: 50%;
z-index: -1;
}
.about-container span{
background: #425057;
padding: 0 20px;
}
@media screen and (max-width: 900px) {
.about-container {
display: block;
}
.about {
position: relative;
}
.about-container h3::before,
.about-container h3::after {
width: 50%;
}
.family,
.hobbies {
margin: auto;
}
.family {
margin-bottom: 60px;
}
}
/*TRANSITION*/
.transition {
height: 50px;
width: 100%;
background: linear-gradient(#425057, #354f52);
}
/*FOOTER*/
footer {
display: flex;
flex-flow: row wrap;
padding: 60px 50px 20px 50px;
background: #2f3e46;
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
.footer {
margin: auto;
position: relative;
}
.footer-container {
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
#logo {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
}
.footer > * {
flex: 1 100%;
}
.footer-col-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-col-right h4 {
font-size: 20px;
color: #cad2c5;
margin-bottom: 35px;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
}
.footer-col-right h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer-col-right ul li:not(:last-child) {
margin-bottom: 10px;
}
.box li a,
.box li p {
font-size: 16px;
color: #f5f5f5;
text-decoration: none;
font-weight: 300;
display: block;
font-family: "Roboto Slab", serif;
transition: all 0.3s ease;
}
.footer-col-right ul li a:hover {
color: #cad2c5;
padding-left: 10px;
}
.footer a {
text-decoration: none;
}
.footer-col-right {
display: flex;
flex-flow: row wrap;
}
.footer-col-right > * {
flex: 1 50%;
margin-right: 1.25em;
}
.footer-row-bot {
text-align: center;
color: #cad2c5;
padding-top: 45px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer-col-left p {
padding-right: 20%;
}
.footer-col-left .socials a {
display: inline-block;
height: 40px;
width: 40px;
background: #52796f;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(202, 210, 197, 1);
transition: all 0.5s ease;
}
.socials {
padding-top: 5px;
}
.footer-col-left .socials a:hover {
background: rgba(202, 210, 197, 1);
color: #52796f;
}
@media screen and (max-width: 780px) {
footer {
padding: 60px 10px 20px 10px;
}
}
@media screen and (min-width: 700px) {
.footer-col-right > * {
flex: 1;
}
.footer-col-left {
flex: 1 0px;
}
.footer-col-right {
flex: 2 0px;
}
}
@media screen and (max-width: 700px) {
.footer {
padding: 15px;
}
.footer-container {
position: absolute;
margin-top: 30px;
padding: 0;
top: 0;
transform: translateY(0);
}
.footer-col-right {
margin-top: 75px;
}
.footer-col-right h4 {
margin-top: 50px;
}
}
除非保持图像的纵横比，否则无法保持相同的图像。最终，如果你保持横幅100vh，它将开始在水平轴上向下裁剪。您可以通过定义背景位置来解决背景图像的问题(面部不居中(。文本下方的示例将使图像在X轴和Y轴上居中。您也可以降低高度，使图像保持比例。
background-position: center center;
溢出的问题，可能是视口外的元素。你能为此设置一个代码片段吗？
在我提供的这个代码片段中，我看不到任何溢出，我可能只需要在本地机器上进行测试。在下面的例子中，图像具有位置中心，但也要注意，所提供的图像实际上是图像中心的肖像。
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
outline: none !important;
}
/*NAVIGATION BAR*/
header {
position: absolute;
z-index: 10;
width: 100%;
padding: 25px 5%;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand {
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
text-shadow: 1px 1px 3px black;
margin-right: 0;
}
.navbar-brand:hover {
color: rgba(202, 210, 197, 1);
}
.nav-item,
.nav-link {
font-size: 1.05em;
text-transform: uppercase;
font-weight: 800;
margin-right: 20px;
color: #cad2c5;
text-shadow: 1px 1px 5px black;
font-family: "Montaga", serif;
letter-spacing: 1px;
transition: all 0.5s;
}
.nav-link:hover {
background: #2f3e46;
color: #cad2c5;
}
#navbutton {
font-size: 1.05em;
text-transform: capitalize;
font-weight: 500;
font-family: "Montaga", serif;
letter-spacing: 1px;
padding: 9px 25px;
background: #cad2c5;
border: none;
border-radius: 50px;
transition: all 0.5s;
margin-left: 10px;
}
#navbutton:hover {
background: #2f3e46;
color: #cad2c5;
}
.burger div {
width: 25px;
height: 3px;
background: #cad2c5;
margin: 5px;
border-radius: 3px;
transition: all 0.3s ease;
}
.burger {
display: none;
}
/* Make from burger icon to X icon */
.toggle #line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle #line2 {
opacity: 0;
}
.toggle #line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
/* Animation for links */
@keyframes linkSlide {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/*BANNER*/
.banner {
position: relative;
background: linear-gradient(rgba(24, 25, 26, 0.4), rgba(24, 25, 26, 0.4)),
url("https://t3.ftcdn.net/jpg/02/22/85/16/360_F_222851624_jfoMGbJxwRi5AWGdPgXKSABMnzCQo9RN.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#banner-text {
font-size: 6rem;
color: rgb(202, 210, 197);
letter-spacing: 2px;
text-shadow: 1px 1px 10px black;
font-family: "Dancing Script", cursive;
}
/* Mobile */
@media screen and (max-width: 992px) {
body {
overflow-x: hidden;
}
.navbar-nav {
position: absolute;
height: calc(95vh - 80px);
right: 0;
width: 100%;
top: 80px;
background: #354f52;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: space-between;
padding: 100px 0px;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease-in;
}
.nav-item,
.nav-link {
margin-right: 0;
text-shadow: none;
}
.navbar-nav li a:hover {
color: #354f52;
background: #edf0f1;
padding: 10px 20px;
text-shadow: none;
}
.nav-item {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
.navbar-nav.mobilenav-active {
transform: translateX(0%);
opacity: 0.96;
}
#navbutton {
margin-left: 0;
}
#banner-text {
font-size: 5rem;
}
}
/*PERSONAL*/
.personal {
background: #425057;
margin: 0;
padding: 50px;
color: #EEF0F2;
position: relative;
line-height: 1.8;
font-family: "Roboto Slab", serif;
}
.personal p {
max-width: 1200px;
margin: auto;
font-size: 17px;
}
.about {
background: #425057;
padding: 20px 50px 50px 50px;
color: #EEF0F2;
line-height: 1.8;
font-family: "Roboto Slab", serif;
}
.about-container {
display: flex;
max-width: 1200px;
margin: auto;
}
.about-container h3 {
font-family: "Poppins", sans-serif;
text-align: center;
color: #f5f5f5;
margin: auto;
position: relative;
z-index: 1;
margin-bottom: 20px;
letter-spacing: 1px;
word-spacing: 1px;
}
.about-container p {
text-align: justify;
font-size: 17px;
}
.hobbies{
margin-left: 50px;
}
.family{
margin-right: 50px;
}
.about-container h3::before {
content:"";
display: block;
width: 200px;
height: 2px;
background: #f5f5f5;
position: absolute;
left: 0;
top: 50%;
z-index: -1;
}
.about-container h3::after {
content:"";
display: block;
width: 200px;
height: 2px;
background: #f5f5f5;
position: absolute;
right: 0;
top: 50%;
z-index: -1;
}
.about-container span{
background: #425057;
padding: 0 20px;
}
@media screen and (max-width: 900px) {
.about-container {
display: block;
}
.about {
position: relative;
}
.about-container h3::before,
.about-container h3::after {
width: 50%;
}
.family,
.hobbies {
margin: auto;
}
.family {
margin-bottom: 60px;
}
}
/*TRANSITION*/
.transition {
height: 50px;
width: 100%;
background: linear-gradient(#425057, #354f52);
}
/*FOOTER*/
footer {
display: flex;
flex-flow: row wrap;
padding: 60px 50px 20px 50px;
background: #2f3e46;
line-height: 1.5;
font-family: "Poppins", sans-serif;
}
.footer {
margin: auto;
position: relative;
}
.footer-container {
position: absolute;
margin: 0;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
#logo {
margin: 0;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.2px;
color: rgba(202, 210, 197, 1);
}
.footer > * {
flex: 1 100%;
}
.footer-col-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-col-right h4 {
font-size: 20px;
color: #cad2c5;
margin-bottom: 35px;
text-transform: capitalize;
font-family: "Poppins", sans-serif;
font-weight: 500;
position: relative;
}
.footer-col-right h4::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
background: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer-col-right ul li:not(:last-child) {
margin-bottom: 10px;
}
.box li a,
.box li p {
font-size: 16px;
color: #f5f5f5;
text-decoration: none;
font-weight: 300;
display: block;
font-family: "Roboto Slab", serif;
transition: all 0.3s ease;
}
.footer-col-right ul li a:hover {
color: #cad2c5;
padding-left: 10px;
}
.footer a {
text-decoration: none;
}
.footer-col-right {
display: flex;
flex-flow: row wrap;
}
.footer-col-right > * {
flex: 1 50%;
margin-right: 1.25em;
}
.footer-row-bot {
text-align: center;
color: #cad2c5;
padding-top: 45px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer-col-left p {
padding-right: 20%;
}
.footer-col-left .socials a {
display: inline-block;
height: 40px;
width: 40px;
background: #52796f;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: rgba(202, 210, 197, 1);
transition: all 0.5s ease;
}
.socials {
padding-top: 5px;
}
.footer-col-left .socials a:hover {
background: rgba(202, 210, 197, 1);
color: #52796f;
}
@media screen and (max-width: 780px) {
footer {
padding: 60px 10px 20px 10px;
}
}
@media screen and (min-width: 700px) {
.footer-col-right > * {
flex: 1;
}
.footer-col-left {
flex: 1 0px;
}
.footer-col-right {
flex: 2 0px;
}
}
@media screen and (max-width: 700px) {
.footer {
padding: 15px;
}
.footer-container {
position: absolute;
margin-top: 30px;
padding: 0;
top: 0;
transform: translateY(0);
}
.footer-col-right {
margin-top: 75px;
}
.footer-col-right h4 {
margin-top: 50px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./css/about-style.css" rel="stylesheet" />
<title>Brian Wyann</title>
</head>
<body>
<!--NAVIGATION BAR-->
<header>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand navbar-left" href="index.html">BrianWyann</a>
<ul class="navbar-nav navbar-light ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./project.html">Projects</a>
</li>
</ul>
<div class="burger navbar-center">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
<a href="./contact.html" id="contact">
<button id="navbutton">Contacts</button>
</a>
</nav>
</header>
<!--BANNER-->
<section class="banner">
<h1 id="banner-text">Who Am I?</h1>
</section>
<!--PERSONAL-->
<div class="personal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies vulputate auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac volutpat lacus, a porta tellus. Nullam accumsan, massa eget condimentum convallis, mauris nunc efficitur augue, in dapibus risus diam euismod lorem. Ut non venenatis magna. Duis eget est aliquam sapien pretium molestie id eget felis. Praesent bibendum ultrices libero. Quisque sodales nulla dui, id iaculis dui dignissim sed. Nam iaculis erat interdum quam tincidunt, Donec viverra dignissim felis, sit amet luctus lacus gravida a. Pellentesque eu dapibus turpis.
</br></br>
Sed accumsan ligula cursus. Nullam ut auctor velit, nec maximus mauris. Nullam fermentum volutpat lorem ut eleifend. Aenean facilisis et nisl eget euismod. Curabitur vitae ligula quis dolor cursus euismod ac eu tellus.Cras finibus, libero et molestie rutrum, lorem felis dapibus tellus, a vehicula nulla diam eu ante. Sed euismod leo ligula. Maecenas ut neque metus. Etiam placerat neque sed justo tempus, at fermentum eros ornare. Duis facilisis metus a turpis blandit, a mollis ipsum malesuada.
</p>
</div>
<div class="about">
<div class="about-container">
<div class="family">
<h3><span>My Family</span></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus viverra.
</p>
</div>
<div class="hobbies">
<h3><span>My Hobbies</span></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis fermentum nibh. Maecenas elit ligula, efficitur in finibus a, pretium non ante. Mauris pharetra at libero vitae mollis. Aliquam erat volutpat. Suspendisse vehicula volutpat congue. Aenean commodo nibh efficitur, interdum nisi fermentum, ornare lacus. Donec ultricies orci at metus
</p>
</div>
</div>
</div>
<!--TRANSITION-->
<div class="transition"></div>
<!--FOOTER-->
<footer class="footer">
<div class="footer-col-left">
<div class="footer-container">
<a id="logobutton" href="index.html">
<h4 id="logo">BrianWyann</h4>
</a>
<div class="socials">
<a href="https://www.facebook.com/" target="blank"
><i class="fab fa-facebook-f"></i
></a>
<a href="https://twitter.com/" target="blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://www.instagram.com/" target="blank"
><i class="fab fa-instagram"></i
></a>
<a href="https://www.linkedin.com/feed/" target="blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<ul class="footer-col-right">
<li>
<h4>Myself</h4>
<ul class="box">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./project.html">Projects</a></li>
<li><a href="./contact.html">Contacts</a></li>
</ul>
</li>
<li class="mooc">
<h4>MOOCs</h4>
<ul class="box">
<li><a href="https://www.edx.org/" target="blank">edX</a></li>
<li>
<a href="https://www.coursera.org/" target="blank">Coursera</a>
</li>
<li>
<a href="https://www.futurelearn.com/" target="blank"
>FutureLearn</a
>
</li>
<li>
<a href="https://cognitiveclass.ai/" target="blank"
>CognitiveClass</a
>
</li>
</ul>
</li>
<li>
<h4>Address</h4>
<ul class="box">
<li>
<p>
C 29, Perumahan Sunter Mediterania, 14340, North Jakarta City,
Jakarta, Indonesia
</p>
</li>
</ul>
</li>
</ul>
<div class="footer-row-bot">
<p>All right reserved by ©wyannbrian 2020</p>
</div>
</footer>
<script src="./js/app.js"></script>
</body>
</html>所以我发现溢出确实是问题所在。但首先我要感谢Kenneth的回应，他的回应最终帮助我找到了解决方案。
解决方案是清除溢出的-x。但由于移动浏览器忽略了body和html标记，我需要在body元素的正下方添加一个<div class="site">，并在body元素关闭之前将其关闭。然后在添加它之后，我所需要做的就是将它添加到css中。
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
p.S：我在另一篇帖子上找到了答案(Overflow-x：隐藏；在移动设备上不工作(。答案是Adrià写的。