Navbar help (color and stretch)

1

Hello,
I am working on a tribute page and I am having trouble with my nav bar. I think I have it stretched to the pages width (I’m not really sure though) Most importantly though I am trying to change the background color of the nav bar to match the elements (#dddddd) nothing that I am doing seems to be working. Please help. Thanks!!

          <!--HTML-->
<div class=id="nav" margin-top="-50px">
<ul margin-top="-15px">
  <li><a href="#">Home</a></li>
  <li><a href="#">Bio</a></li>
  <li><a href="#">Photos</a></li>
  <li><a href="#">Recipes</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  </ul>
</div>

     <!--CSS-->
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline;
  float: left;
  overflow: hidden;
}
ul{
  margin-top: -50px;
}
a {
  display: block;
  margin: 80px;
  padding: 10px;
  background-color: #dddddd;
}
li a:hover{
  background-color: #3AD;
}
#nav{
  property: responsive;
  padding-left: -5%;
  padding-right: -5%;
}
2

Just at first glance I’m seeing an issue with the way you’re applying the id to the <nav> element:

<div class=id="nav" margin-top="-50px">

The class= is not necessary there any may be causing issues. Also the margin-top="-50px" is not a valid attribute for an HTML tag, you should move that style under the #nav {... } selector in your CSS.

I also don’t think property: responsive; is a valid CSS property. If you’re looking to have it be the width of the page, then you’re probably looking for width: 100%; :slight_smile:

As for background colour, you can add it to #nav using the background-color CSS property.

Good luck!