由于某种原因，我已经通过我的代码和在线，但我不能找出一个解决方案。我的菜单/导航栏在左边，是浮动的，也不会延伸到页面的长度。我试着改变东西的位置，但无济于事。是少了什么还是出了什么问题?我怎样才能让酒吧伸展整个页面，并被放置在中心?
菜单在页面上的样子
<标题>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>
.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;
}
您还没有提到ul的宽度。如果你想它是全宽的页面提到width:100%;。但是它会溢出页面。您还需要将left或right属性设置为0。如果你不想让它的宽度，使用适当的宽度，说width:96%;和设置left:2%;