我刚开始学习CSS，所以我想做一个网站。
它在电脑上看起来很好。但当我调整浏览器大小或在手机上加载网站时，右侧有一个不需要的空间。
我认为问题在于我的CSS的导航栏，我在那里使用了显示类型"；弯曲"；。但我所做的一切都无法解决问题。
这是我拍的两张截图。
1
2
body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: 100%;}
.backgroundimage
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}
/*--------------I think the problem lies here------------------------*/
.navbar {padding: 1em;
background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
margin: auto;}
.link {text-decoration: none;
color: rgb(255, 255, 255);
font-size: 1.25em;
padding: 1em;}
/*---------------------------------------------------------------------*/
.hugelogo {text-align: center;}
.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}
.about>h1 {text-align: center;}
.about>p {margin: 2em;}
.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
margin: auto;}
.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}
.historyhome {text-align: center;
margin-top: 3rem;}
/* javascript starts here*/
.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
border-radius: 10%;}<!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.0">
<title>Straw Hat Pirates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="backgroundimage"></div>
<header class="header">
<div class="navbar">
<nav>
<ul>
<img src="https://unsplash.it/100/40" alt="logo" class="logonav">
<li ><a href="" class="link">Home</a></li>
<li ><a href="" class="link">Gallery</a></li>
<li ><a href="" class="link">History</a></li>
<li ><a href="" class="link">Login</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div class="hugelogo">
<img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
</div>
<div class="news">
<h3>News</h3>
<ul>
<li>update1</li>
<li>update2</li>
<li>update3</li>
<li>update4</li>
<li>update5</li>
<li>update6</li>
</ul>
</div>
<div class="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut dolor et excepturi quia temporibus vero nisi?
Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
ea nemo veritatis amet aperiam modi aliquid expedita assumenda
neque, vel nihil, incidunt nam nesciunt illo consequatur eum
possimus numquam fuga. Mollitia repellendus iure, soluta illum
sapiente perspiciatis architecto beatae accusamus ad ut dolor
at est delectus non dolores neque quasi, vel eligendi libero
porro aliquam corporis veniam similique? Laudantium nulla quae
architecto, facere cumque culpa excepturi placeat quia quidem
ipsum. Veniam deleniti autem voluptas molestias suscipit
reprehenderit possimus iure. Cupiditate a odit quidem. Nam
molestiae odio quos esse iure deleniti voluptatum magnam
rerum laudantium? Molestias ullam itaque, expedita
blanditiis quasi asperiores dolores numquam similique error,
laboriosam necessitatibus. Quos soluta officiis doloremque,
harum quibusdam voluptas. Quia quisquam nulla laboriosam
necessitatibus laudantium sunt recusandae corrupti tempore, nisi
assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
facere.</p>
</div>
<div class="membershome">
<h2>Members</h2>
<ul>
<li class="memberhome">member1</li>
<li class="memberhome">member2</li>
<li class="memberhome">member3</li>
<li class="memberhome">member4</li>
<li class="memberhome">member5</li>
<li class="memberhome">member6</li>
</ul>
</div>
<div class="galleryhome">
<h2>Gallery</h2>
<img src="https://www.unsplash.it/100/100" alt="img1">
<img src="https://www.unsplash.it/100/100" alt="img2">
<img src="https://www.unsplash.it/100/100" alt="img3">
<img src="https://www.unsplash.it/100/100" alt="img4">
</div>
<div class="historyhome">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit cum perferendis dolorem magni laboriosam.
Iste cumque, reiciendis distinctio sequi quidem dolore hic
et repellendus deserunt ratione nisi velit provident?
Laudantium.</p>
</div>
</section>
<footer class="footer">
<div class="footer">
<nav>
<ul>
<li><a href="">IG</a></li>
<li><a href="">FB</a></li>
<li><a href="">SC</a></li>
<li><a href="">WA</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>感谢您的帮助。谢谢
3:Github链接
所以这里基本上发生的是你的导航栏溢出了你的身体。而截面在主体中只占100%的宽度。所以在这种情况下，你有以下选择：
- 或者在导航栏中添加滚动条。(快速修复(
- 添加CCD_ 1。(导航栏选项会安排在第二行，这也是一个快速解决方案。(
- 甚至用导航栏扩展你的背景。(我在下面的代码中通过设置默认为100%的主体
width:auto;来完成，现在在移动设备中，你的网站看起来就像是pc网站的最小化版本，这不是一件好事，但如果你想让它工作，你必须处理媒体查询。这就像写整个代码一样( - 添加折叠菜单。(再次是媒体查询和创建折叠导航栏的代码(
body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: auto;}
.backgroundimage
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}
/*--------------I think the problem lies here------------------------*/
.navbar {padding: 1em;
background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
margin: auto;}
.link {text-decoration: none;
color: rgb(255, 255, 255);
font-size: 1.25em;
padding: 1em;}
/*---------------------------------------------------------------------*/
.hugelogo {text-align: center;}
.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}
.about>h1 {text-align: center;}
.about>p {margin: 2em;}
.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
margin: auto;}
.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}
.historyhome {text-align: center;
margin-top: 3rem;}
/* javascript starts here*/
.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
border-radius: 10%;}<!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.0">
<title>Straw Hat Pirates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="backgroundimage"></div>
<header class="header">
<div class="navbar">
<nav>
<ul>
<img src="https://unsplash.it/100/40" alt="logo" class="logonav">
<li ><a href="" class="link">Home</a></li>
<li ><a href="" class="link">Gallery</a></li>
<li ><a href="" class="link">History</a></li>
<li ><a href="" class="link">Login</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div class="hugelogo">
<img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
</div>
<div class="news">
<h3>News</h3>
<ul>
<li>update1</li>
<li>update2</li>
<li>update3</li>
<li>update4</li>
<li>update5</li>
<li>update6</li>
</ul>
</div>
<div class="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut dolor et excepturi quia temporibus vero nisi?
Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
ea nemo veritatis amet aperiam modi aliquid expedita assumenda
neque, vel nihil, incidunt nam nesciunt illo consequatur eum
possimus numquam fuga. Mollitia repellendus iure, soluta illum
sapiente perspiciatis architecto beatae accusamus ad ut dolor
at est delectus non dolores neque quasi, vel eligendi libero
porro aliquam corporis veniam similique? Laudantium nulla quae
architecto, facere cumque culpa excepturi placeat quia quidem
ipsum. Veniam deleniti autem voluptas molestias suscipit
reprehenderit possimus iure. Cupiditate a odit quidem. Nam
molestiae odio quos esse iure deleniti voluptatum magnam
rerum laudantium? Molestias ullam itaque, expedita
blanditiis quasi asperiores dolores numquam similique error,
laboriosam necessitatibus. Quos soluta officiis doloremque,
harum quibusdam voluptas. Quia quisquam nulla laboriosam
necessitatibus laudantium sunt recusandae corrupti tempore, nisi
assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
facere.</p>
</div>
<div class="membershome">
<h2>Members</h2>
<ul>
<li class="memberhome">member1</li>
<li class="memberhome">member2</li>
<li class="memberhome">member3</li>
<li class="memberhome">member4</li>
<li class="memberhome">member5</li>
<li class="memberhome">member6</li>
</ul>
</div>
<div class="galleryhome">
<h2>Gallery</h2>
<img src="https://www.unsplash.it/100/100" alt="img1">
<img src="https://www.unsplash.it/100/100" alt="img2">
<img src="https://www.unsplash.it/100/100" alt="img3">
<img src="https://www.unsplash.it/100/100" alt="img4">
</div>
<div class="historyhome">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit cum perferendis dolorem magni laboriosam.
Iste cumque, reiciendis distinctio sequi quidem dolore hic
et repellendus deserunt ratione nisi velit provident?
Laudantium.</p>
</div>
</section>
<footer class="footer">
<div class="footer">
<nav>
<ul>
<li><a href="">IG</a></li>
<li><a href="">FB</a></li>
<li><a href="">SC</a></li>
<li><a href="">WA</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>