当页面超过1页内容时，列表不会居中和包装

Question

这是我的代码：

ul {
     width: 100%; 
     position: relative;
     left:10%;
     margin: 0;
     padding-left: 100px;
}

li {
    float:left;
    box-align:right;
}

li a {
    display: block;
    width: 265px;
    background-color: #800000;
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px;
    border-right: 1px solid;
    border-left: 1px solid;
}

#list {
    background-color: #800000;
    padding: 0.02px 0;
    margin-bottom: 10px;
    overflow: hidden;
    width:70%;
    text-align:center;
    clear:left;
}
<ul>
  <center> 
    <li><a href="HomePage.html">Introduction</a></li> 
    <li><a href="Biography.html">Biography</a></li> 
    <li><a href="Songs.html">Brand New</a></li> 
    <li><a href="Pictures.html">Pictures</a></li> 
  </center> 
</ul>

所以我尝试使用浮动，宽度，文本对齐，框对齐和位置都无济于事。我只想尝试制作一个简单的导航列表，其中包含横跨页面宽度的框。我注意到，当我获得一个内容页面时，列表包含了。所以我相信它可能与我的百分比有关。我不确定。任何帮助，将不胜感激。