Project "Broadway" nav bar formatting issue

Projects
1 
html, body {
  margin: 0;
  padding: 0;
}   
  

.header{
  background-color: #333333;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

.jumbotron {
  background-image: url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
height: 953px;
width: 1435px;
background-repeat: no-repeat;
background-size: cover;
}

.nav {
  margin: 0;
  padding: 20px 0;
}

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

.main {
  position: relative;
  top: 180px;
  text-align: center;
}

.main h1 {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0;
  margin-bottom: 80px;
  text-transform: uppercase;
}

.btn-main {
  background-color: #606060;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  border: 1px solid #333;
  color: #333333; 
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;  
  display: inline-block;
  margin-bottom: 20px;      
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 50px;
  margin-bottom: 40px;
}

.clearfix {
  clear: both;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
}

.footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
}

@media (max-width: 500px) {
  .main h1 {
    font-size: 50px;
    padding: 0 40px;
  }

  .supporting .col {
    width: 100%;
  }
}

type or paste code here
2 
<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <ul class="nav">
          <li>About</li>
          <li>Work</li>
         	<li>Team</li>
         	<li>Contact</li>
       </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">  
        <div class="main">
          <h1>We are Broadway</h1>
          	<a class="btn-main" href="google.com">Get Started</a>
          
        </div>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg">
          <h2>Design</h2>
          <p>Make your projects look great and interact beautifully.</p>
          <a class="btn-default" href="google.com"> Learn More</a> 
        </div>
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg">
          <h2>Develop</h2>
          <p>Use modern tools to turn your design into a web site</p>
          <a class="btn-default" href="google.com"> Learn More</a> 
          
        </div>
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
          <h2>Deploy</h2>
          <p>Use modern tools to turn your design into a web site</p>
          <a class="btn-default" href="google.com"> Learn More</a> 
          
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

    <div class="footer">
      <div class="container">
        <p>&copy; Broadway 2015</p>
      </div>
    </div>
  </body>
</html>
3

Hello, newbie here…

I’d just like to know why I am experiencing this issue, and where I went astray in my code.

This link leads to the website that I am supposed to copy. You’ll notice the nav bar fits nicely, while I have two chunks missing.

https://s3.amazonaws.com/codecademy-content/projects/broadway/index.html

1366×1200 141 KB
1366×1200 264 KB

4

Hello,

^This bit of code max-width is stopping the header from being bigger thus the space. Removing this line will sort it out: max-width: 940px

5

Thank you for your reply! I went ahead and edited that bit out, and while your solution makes perfect sense I have seen nothing change. The problem still persists :expressionless:

6

Paste in a screen shot and your updated code please

7

To my understanding you nav bar is not big enough for what I did was

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

Then in CSS file I did this

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

As you can see I made the container 100% as now it will go the full width on any resolution.
And the height I made personally so I see how big it is as I dont want it to be big
And for the list it self I did not alot

.nav li {
  margin-left: 100px;
  display: inline-block;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 20px;
  list-style-type: none;
}

I made it so it has no dots or numbers neither does it stack down because its display is set to inline block so now it sits next to each other and I made the margin-left: size personally so I know how far apart the words are
8

hi there,
i recommend you change this:

into this:

.jumbotron {
  background-image: url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
height: 953px;
width:100%;
/*width: 1435px;*/
background-repeat: no-repeat;
background-size: cover;
}

instead of giving a width in pixels define:width:100%;.
this fixed your problem when I tested this code.
check out this fiddle: