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;

}

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

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

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

编辑 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，我已经向左更改：0；

Answer 2

删除此行margin-left：55%；

Answer 3

它是由主体上的边距引起的，如果您添加 margin:0 它会消除它。

body
{
    height: 100%;
    width: 100%;
    margin:0;
}

更新了 jsfiddle https://jsfiddle.net/d5qt5x4x/

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

CSS bootstrap having a weird issue with a navbars margin

html

css

margin

navbar

twitter-bootstrap