navbar is not full width

Question

I am building my own portfolio/company site and my code is below I try to make it full width but it does not go full width. I am writing the code in html5 and css3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TECH-EXPERTS</title>
  <link rel="stylesheet" href="css/style.css">
</head>

  <body>

  <header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Our Work</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  </header>

</body>
</html>

nav{
  background-color: black;
  border-radius: 5px;
  display: block;
  overflow: hidden;
  width: 90%;
}

nav ul {
  margin: 0;
  padding: 0;
  float: right;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
}

nav ul li a {
  color: red;
  display: block;
  line-height: 56px;
  padding: 0 24px;
  text-decoration: none;
}

nav a:hover{
  color: blue;
}

I'm not sure if I understood you... what do you want to be full width? You are styling just one element (setting its width to 90%). — David, Sep 05 '15 at 02:18

score 0 · Answer 1 · answered Sep 05 '15 at 03:52

0

First off, assuming that you want the navbar to span the entire width of the window, you need make sure that you're removing the default margin that is placed on the body element (if you are not using a css reset of some kind that already takes care of that).

Try:

body {
    margin: 0;
}

Now remove the width: 90%; that's on your navbar. That should get you pointed in the right direction.

Here's a Codepen of that in action.

answered Sep 05 '15 at 03:52

ElijahFowler

56
4

@omiedbadr Glad I could help. If my answer was satisfactory would you please mark it as the answer to your question? Thanks, and have a great day. – ElijahFowler Sep 08 '15 at 01:59

navbar is not full width

1 Answers1