导航栏在响应模式下断开

Question

我为自己创建了一个网络公文包。当我在桌面上查看时，一切都很好，但当我在手机上查看时就会出现问题。

a( 导航条折叠，但没有正确对齐。b( 在我的英雄部分的视口右侧有一些空间。我试图理解这个错误，但没有用。

链接到投资组合：https://smammar.netlify.app/

HTML代码

<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand font-tertiary h3" href="index.html"><img src="images/logo2.png" alt="logo"
style="width: 130px; height: 130px;"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation" id="responsiveNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- hero area -->
<section class="hero-area bg-primary" id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-white font-tertiary">Hi! I’m <br> Syed Mohammad Ammar <br> Full-Stack Designer</h2>
</div>
</div>
</div>
<div class="layer" id="l2">
<img src="images/illustrations/dots-cyan.png" alt="bg-shape">
</div>
<div class="layer" id="l4">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<div class="layer" id="l6">
<img src="images/illustrations/dots-group-cyan.png" alt="illustrations" class="bg-shape-6">
</div>
<div class="layer" id="l9">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<!-- social icon -->
<ul class="list-unstyled ml-5 mt-3 position-relative zindex-1">
<li class="mb-3"><a class="text-white" href="https://twitter.com/SMAmmar5"><i class="fab fa-github"
id="socialIcons"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-twitter" id="socialIcons1"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-behance" id="socialIcons2"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-linkedin" id="socialIcons3"></i></i></a></li>
</ul>
<!-- /social icon -->
</section>
<!-- /hero area -->
<!-- about -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<p class="font-secondary paragraph-lg text-dark">I'm a full-stack designer based in Karachi, <span style="color: #228B22"> Pakistan </span> with
experience in delivering end-to-end UX/UI design to complete website for software products. I'm passionate about improving the
lives of others by creating human centric products.</p>
<a href="https://www.dropbox.com/.../syed%20mohammad%20ammar.pdf..." class="btn "
id="viewResume">View Resume</a>
</div>
</div>
</div>
</section>

CSS代码

.navigation {
padding: 40px 100px;
transition: .3s ease;
}
.navigation.nav-bg {
background-color: #000
;
padding: 0 70px;
}
@media (max-width: 600px) {
.navigation.nav-bg {
padding: 15px 20px;
}
}
@media (max-width: 600px) {
.navigation {
padding: 20px;
background: #000
;
}
}
.navbar .nav-item .nav-link {
font-family: "BwNistaInt-xBd";
text-transform: uppercase;
padding: 15px;
}
.navbar .nav-item.active {
font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover{
border-color: #ffa500;
color: #ffa500;
box-shadow: 0 0.5em 0.5em -0.5em #ffa500;
transition: all 0.2s;
cursor: pointer;
}
.hero-area {
padding: 300px 0 200px;
position: relative;
}
.hero-area h2 {
position: relative;
z-index: 2;
}
.layer {
position: absolute;
z-index: 1;
}
#l1 {
bottom: 0;
left: 0;
}
#l2 {
top: 190px;
left: -250px;
}
#l3 {
top: 200px;
left: 40%;
}
#l4 {
top: 200px;
right: 40%;
}
#l5 {
top: 100px;
right: -150px;
}
#l6 {
bottom: -20px;
left: 10%;
}
#l7 {
bottom: 100px;
left: 20%;
}
#l8 {
bottom: 160px;
right: 45%;
}
#l9 {
bottom: 100px;
right: -10px;
}
.layer-bg {
position: absolute;
bottom: 0;
left: 0;
}

Answer 1

这里有一个快速修复程序。尝试将其添加到css中，这将删除响应模式下的间距和不正确的对齐。

body, html {
overflow-x:hidden;
}

Answer 2

您可以删除header标记&它是class，然后将"fixed-top"类添加到nav标记中。这可能会解决问题。