【发布时间】：2021-09-14 19:21:01
【问题描述】：
我刚开始学习CSS，所以我正在尝试做一个网站。
在电脑上看起来不错。但是当我调整浏览器大小或在手机上加载网站时，右侧会出现这个不需要的空间。
我认为问题在于我使用显示类型“flex”的 CSS 导航栏。但是我没有解决这个问题。
这是我截取的 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>感谢任何帮助。谢谢
【问题讨论】：
标签： html css debugging flexbox display