为什么我的 ul 菜单没有延伸到 window 的末尾并且没有居中？

Question

出于某种原因，我查看了我的代码和在线，但我无法找到解决方案。我的 menu/nav 条在左边并且是浮动的，也不会伸展到页面的长度。我尝试改变事物的位置，但没有帮助。是不是少了什么东西或者有什么问题？如何让栏在整个页面上伸展并放置在中心？

How the menu looks on the page

HTML

<html>
  <head>
    
    <meta charset="utf-8" />
        <title>Yara Shahidi: A multi-talented actress</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />

      <!-- link the webpage's stylesheet -->
      <link rel="stylesheet" href="/style.css" />

      <!-- link the webpage's JavaScript file -->
      <script src="/script.js" defer></script>

  </head>
  <body>
    <div class="container">
         <h1>Yara Shahidi</h1>
         <h3>“Instead of inheriting a broken system, we have the power to change it”</h3>
         <style= "position:relative; left:20px; top:0px;"</style> 
      </div>

        <div>
        <img src="assets/mainimage.png" alt="A portrait picture of Yara Shahidi smiling" id="pfp" class="responsive" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">
        </div>

        <div class= "youtube-video">
        <h4>
            <style="float": right margin: 200px 100px 100px 200px;>
     <iframe src="https://www.youtube-nocookie.com/embed/7HceyJdOeH8?modestbranding=1&showinfo=0&rel=0&cc_load_policy=1&color=white" width="425" height="240" frameborder="0"></iframe>
            </h4>
        </div>

<main>

<p id="exp"style="border:8px; border-style:solid; border-color:#99ccff; padding:2em; ">Yara Shahidi is a multi-talented actress that currently expresses herself through acting, activism and modeling. She has earned a few awards (NAACP, BET and Glamour) and she keeps rising in the film industry while continuously making a change in the world.
</p>

</main>

  <nav>
   <ul>
          <li><a href=index.html>HOME</a></li>
          <li><a href=portfolio.html>PORTFOLIO</a></li>
      </ul>
  </nav>
    
    
  </body>
</html>

CSS

.title{
    border: black, 20px;
}


body{
    background: lightblue
}


h1{
    font-family: LeagueSpartan-Bold;
    text-align: center;
    color: #ffffff;
    border: 5px solid #52b2cf;
    word-wrap: break-word;
    width: 300px;
    position: relative;
    left: 34px;
    padding: 5px;
}

#exp{
    font-family: Roboto;
    font-size: 1em;
    word-wrap: break-word;
    width: 400px;
    position: absolute;
    left: 821px;
    bottom: 190px;
    line-height: 1.5em;
    text-align: justify;
}

nav{
    font-family: leaguespartan-bold;
    font-size: 15px;
    text-align: center;
}

a{
    color: #ffffff
}

.responsive {
  width: 100%;
  height: auto;
}

.youtube-video {
position: relative;
left: 360px;
bottom: 175px;
}

#pfp {
    margin-left: 60px;
}

.container{
    margin-left: 65px
}

ul{
    list-style-type: none;
    background-image:linear-gradient(to right, #52b2cf, #f18f01);
    overflow: hidden;
    padding: 1em;
    position: fixed;
    bottom: 0;
}

li{
    display: inline;
}

li a{
    text-decoration: none;
    color: #ffffff;
    font-size: 1.3em;
    padding: 1em;
}

li a:hover{
    background-color: #114b5f;
}

Answer 1

你没有提到 ul 的宽度。如果您希望它是页面的全宽，请提及 width:100%;。但它会溢出页面。您需要将左或右属性也设置为 0。如果您不想要全宽，请使用适当的宽度，例如 width:96%; 并设置 left:2%;

为什么我的 ul 菜单没有延伸到 window 的末尾并且没有居中？

Why does my ul menu not extend to the end of the window and is not centered?

html

css

html-lists

navbar

HTML

CSS