如何使导航栏覆盖整个页面？

Question

I am fairly new to this kind of stuff. I just want my nav bar to cover the page from side to side instead of having the white spaces on both sides and the top.

Here is my CSS

nav ul {list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3E3F43;}

nav li {float: left;}

nav li a {display: block;
       color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;}

li a:hover{background-color: #7559A6;}


Here is my HTML

<nav>

    <ul>
        <li><a href="home.html" class="active">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</nav>

Answer 1

give your nav an id

   <nav id=nav">

And set it's width to 100%

    #nav{
    width:100%;
    }

Answer 2

Firstly, remove the default margin from the body

 body {
      margin: 0;
    }

Then:

CSS tables

 body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: table; width: 100%; } nav li { display: table-cell } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; } 

 <nav> <ul> <li><a href="home.html" class="active">Home</a> </li> <li><a href="about.html">About</a> </li> <li><a href="resume.html">Resume</a> </li> <li><a href="blog.html">Blog</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav> 

Flexbox

 body { margin: 0; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #3E3F43; display: flex; } nav li { flex:1; } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #7559A6; } 

 <nav> <ul> <li><a href="home.html" class="active">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> 

Answer 3

添加你的CSS

nav{ position: absolute; width: 100%;left: 0;top: 0;}