html - CSS bootstrap 有一个奇怪的问题，导航栏边距

Question

所以我正在构建一个网站，但我的导航栏出现了一个奇怪的问题。请注意，我使用的是 Bootstrap ，但此导航栏不是 Bootstrap 导航栏。

首先，我要粘贴我的代码。

这是 HTML:

<div id="nav">
<div class="toppic">
<!-- Logo -->
<img src="logo.jpg" class="img-responsive" id="log">
</div>
<div class="line">
</div>
<div class="navy">
    <ul class="navul">


        <li class="navli"> <a href="index.php">  </a> <div class="testbox active home"> Home </div>    </li>
        <li class="navli"> <a href="about.php">  </a> <div class="testbox"> About </div> </li>
        <li class="navli"> <a href="goals.php">  </a> <div class="testbox  "> Goals </div> </li>
        <li class="navli"> <a href="partners.php">  </a> <div class="testbox"> Partners </div> </li>
        <li class="navli"> <a href="contact.php">  </a> <div class="testbox"> Contact </div> </li>
    </ul>
</div>

这是 CSS:

#nav
{
position: relative;
left: 3%;

width: 97% !important;
margin: 0px !important;

}
.line
{
border-left:1px solid #000;
border-bottom:1px solid #000;
height: 1px;
width: 70%;
position:absolute;
top: 36%;
left:23%;
}
.navy
{
position: absolute;
margin-left: 55%;
width: 35%;
}
 .toppic
{
width: 94% !important;
margin: 0px !important;
}
#log
{
 margin: 0 0 0 0 !important;

}

现在的问题是导航栏在右侧有一个不需要的边距，即使在应用 margin: 0px !important 到整个导航栏之后也是如此。 它仅在您未全屏查看网站时可见(至少在我的显示器上)。这个边距的问题是它给网站添加了一个水平滚动条，当你向右滚动时有一个没有任何元素的空白区域，就是这个边距造成的。

有人知道问题出在哪里吗？

注意 我没有包括其他类，因为在检查 chrome 中的导航栏时我可以看到它们没有奇怪的边距，只有 <div id="nav"> 有它。不是它的子元素 . 根据要求，我也会添加其他类(class)。

编辑 Jsfiddle:https://jsfiddle.net/j9s7st15/ (请注意，这有一些未使用的 css 类，但至少问题出现了)。 Jsfiddle 有一些其他错误，这是因为我没有包含很多 CSS，但正如我所说，我想要解决的问题也存在。

Answer 1

这就是我调整您的 CSS 的方式:

.navy {
    position: absolute;
    /* margin-left: 55%; Remove left margin */
    width: 35%;
    right: 0;
}

对于#nav，我已经改变了 left: 0;