导航菜单创造了额外的不需要空间

Question

我已经创建了一个不必要地在其右侧添加额外空间的导航菜单。当页面较小时，它将在页面底部添加一个滚动条，这使该页面无用。在Dreamweaver进行了一些挖掘之后，看起来UL元素的周围盒子并未以实际的导航菜单为中心。它向右伸出，似乎正在引起问题。我如何将其集中在nav菜单中？

我还在下面包括一个小提琴。

nav {
    float: left;
    width: 100%;
}
  
ul {
    float: left;
    list-style: none;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: center;
}
ul li {
    display: block;
    float: left;
    list-style: none;
    position: relative;
    right: 50%;
    margin: 0px 0px 0px 0px;
    padding: 5px 30px;
    color: white;
    line-height: 1.3em;
}
.main-nav li a:hover {
    border: solid 1px black;
}
  
a {
    color: black;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    border: solid 1px transparent;
    padding: 5px 10px;
}

<nav class="nav">
    <ul class="main-nav">
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="music.html">MUSIC</a></li>
        <li><a href="https://svuvn.bandcamp.com/">STORE</a></li>
        <li><a href="live.html">LIVE</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
<nav>

在JSFIDDLE上查看

Answer 1

只需添加您的nav溢出属性：

nav {
    float: left;
    width: 100%;
    overflow-x: hidden;
}

Answer 2

菜单项之间似乎有太多填充。在CSS块中踢下来：

ul li {
    display: block;
    float: left;
    list-style: none;
    position: relative;
    right: 50%;
    margin: 0px 0px 0px 0px;
    padding: 5px 30px;  //first parameter is top/bottom, the second parameter is left/right.  kick it down to something like 5px 10px;
    color: white;
    line-height: 1.3em;
}

取出右边：50％；为了保证金，请使用"保证金：0自动"；自动将自动中心NAV

Answer 3

您不应使用浮子或左侧对齐纳维尔。相反，尝试这样做：它使纳维托中心且没有用于小型设备的滚动。更新您的UL和LI类：

ul {
    list-style: none;
    padding: 0;
    position: relative;
    text-align: center;
  }
  ul li {
    display: inline-block;
    list-style: none;
    position: relative;
    margin: 0px 0px 0px 0px;
    padding: 5px 30px;
    color: white;
    line-height: 1.3em;
    text-align: center;
  }

此外，如果您希望您的Navbar以小型设备的列表形式出现，只需为您的首选范围添加此媒体查询：

@media (max-width: 480px) {
 ul li {
        display: block;
        list-style: none;
        position: relative;
        margin: 0px 0px 0px 0px;
        padding: 5px 30px;
        color: white;
        line-height: 1.3em;
        text-align: center;
      }
}