Navigation background color and width


#1

Hi there, Someone please help me, I don't know how to set the background color of navigation to full width. Here is my CSS for it:
.nav .container li {
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
color: white;
display: inline;
width: 1024px;
}
.nav .container ul{
background-color: black;
text-align: center;
}


#2

Hey there!

Try position: fixed - that might work, but I'll look around.


#3

I don't seem to be able to set the width either.

position: fixed; Made it smaller.

Here is what I have so far:

.nav {
  margin: 0;
	padding: 20px 0;
  background-color: #333333;
}

.nav li {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  display: inline;
  margin-right: 25px;
  text-transform: uppercase;
}

#4

You need to actually add a .header class into your css and style it. The only style will be the background color. Add it toward the top, like in HTML, where things appear in the order in which they were written.


#5

I think online studies just doesn't work without proper support and guidance.

It's simply impossible for anyone new to HTML and CSS to complete a project.


#6

.header {
background-color: #333333
}
was the code i wrote for question one for changing the color of the background..

then i was able to add a background image in the jumbotron section. but the background covers my nav section and the for links i tried so many , combos, and the most i got it to do was go to the left side, not on a black nav bar just in a inline list i guess you can say.....theres no hint or help i can find to find my mistake here im so lost

heres my css

.jumbotron {
height: 800px;
background-image :url('http://www.freewallpaperfullhd.com/wp-content/uploads/2015/06/wallpapers/aerial_view_of_new_york_city-wallpaper-2560x1600.jpg')

}

.nav {
display: inline;
margin: 0px auto;
padding: 20px 0;
}

.nav li {
display: inline;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
}

oh heres my html. for the nav links

    <ul class="nav">
      	 <li>About</li>
           <li>Work</li>
           <li>Team</li>
           <li>Contact</li>

 </ul>


<div class="jumbotron">
  <div class="container">  
    <div class="main">
      <h1>We are Broadway</h1>

what am i doing wrong ? or what step am i forgetting


#7

im going to youtube it...


#8

Did you figure it out?

It sounds like you are putting the "header" div under the "jumbotron" div which is why the background is covering it. The "header" div goes in it's own section.