删除导航栏两侧和顶部的空白

Question

我四处寻找了许多解决方案，目前我正在重做我拥有的网站的代码，因为我将所有 CSS 单独布置在每个 HTML 页面上。最终我有太多的页面要处理，我决定制作一个样式表来清理它们，但我的一切都是一团糟。缩进、注释等…

目前，我正在网站上的导航栏上工作，但由于某些我无法弄清楚的原因（我已经尝试了很多东西），该栏正好位于中间，在栏的顶部、左侧和右侧。这是 HTML：

 ul { /* unordered list properties */
  list-style-type: none; /*takes out bullet points */
  margin: 0; /* scaling */
  padding: 0; /* scaling */
  overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
  background-color: #0c1f2e; /* colour */
}
li { /* list item properties */
  float: left; /* move item to the left */
  font-size: 14px; /* set the font size to 14 pixels */
}
li a { /* vertical style */
  display: block; /* display style */
  color: #ffffff; /* text colour */
  text-align: center; /* centres the text */
  padding: 19px; /* vertical padding */
  text-decoration: none; /* remove any text effects */
  font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
}
li a:hover { /* vertical style items when hovered upon by cursor properties */
  background-color: #639ddf; /* set the background colour */
  font-size: 20px; /*set the font size to 20 pixels */
}

     <nav> <!-- begin navigation element -->
      <div id="menu"> <!-- create and start new element with the id: menu -->
        <ul> <!-- begin unordered list -->
          <li><a href="index.html">Home</a></li><!-- list items -->
          <li><a href="WebsiteCompetitions.html">Competitions</a></li>
          <li><a href="WebsiteBuilds.html">Builds</a></li>
          <li><a href="WebsiteImages.html">Images</a></li>
          <li><a href="WebsiteVideos.html">Videos</a></li>
          <li><a href="WebsiteComm.html">Fight Club</a></li>
          <li><a href="WebsiteArticles.html">Articles</a></li>
          <li><a href="/mybb">Forums</a></li>
          <li><a href="WebsiteTools.html">Tools</a></li>
          <li><a href="WebsiteNews.html">News</a></li>
          <li><a href="WebsiteOffers.html">Shop</a></li>
          <li><a href="cooperators.html">Allies</a></li>
          <li><a href="WebsiteMore.html">More</a></li>
        </ul> <!-- end the unordered list -->
      </div> <!-- end the 'menu' element -->
    </nav> <!-- end navigation element -->

在此先感谢大家，我希望我已经提供了足够的信息，请不要对我的过度评论过于苛刻，或者将这些意见留给自己。至于我的问题结构和代码，请纠正我做错的任何事情并指出我该如何解决。非常感谢您花时间阅读本文，

原文由 The Killj0y 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是你要找的吗？

链接到 JSFiddle

如果是这样，在你的 CSS 中。添加这个

body {
   margin: 0px;
}

原文由 ddr45 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我使用过的所有解决方案都对我有用，但我找到了一个。在我的 CSS 中：

 .navbar{
  margin-left: -15px;
  margin-right: -15px;
}

看起来我的边距大约有 15 个像素，只是我无法通过将边距设置为 0 来摆脱它。

原文由 TheMooCows237 发布，翻译遵循 CC BY-SA 4.0 许可协议