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

Question

所以我正在建立一个网站，但我的导航栏有一个奇怪的问题。注意我使用的是引导程序，但这个导航栏不是引导程序导航栏。

首先我要粘贴我的代码。

这是 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 之后也是如此。 它仅在您未全屏查看网站时可见（至少在我的显示器上）。这个margin的问题是它给网站增加了一个水平滚动条，当你向右滚动的时候会出现一个没有任何元素的空白区域，这是由这个margin引起的。

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

注意我没有包括其他类，因为在检查 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/