Stuck on 2 parts in #2 & #5 are not positioning correctly?

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
I need help with 2 parts, im trying to shift the list in the header over to the left a bit but not all the way? also im trying to bring the 3 sections with pics, paragraphs and learn more links closer together ?

``` HTML Code:
  • ABOUT
  • WORK
  • TEAM
  • CONTACT
<div class="jumbotron">
  <div class="container">
    <div class="main">
      <h1>We are Broadway</h1>
      <a class="btn-main" href="">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 href="#">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 href="#">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 href="#">LEARN MORE</a>
      
    </div>
  </div>
  <div class="clearfix"></div>
</div>

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

CSS code:

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

.header {
background-color: #333333;
Height: 80px;
width: 100%
}

.container {

margin: 0 auto;
padding: 0 10px;
Height: 0px;
width: 100%;

}

.jumbotron {
height: 600px;
background: url(“http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg”) no-repeat center;
background-size: cover;
}

.nav {
margin: 0;
padding: 20px 0;
text-align: center;
margin-right: 100px;

}

.nav li {
color: #fff;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 12px;
display: inline-block;
margin: 10px;

}

.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: #333;
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: black;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 5px 20px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
margin-bottom: 0px;
}

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

}

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

}

.supporting img {
height: 62px;
}

.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;
}

.supporting a {
color: black;
border: 1px solid #333;
text-decoration: none;
display: inline;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-transform: uppercase;
margin: 20px;
}

.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%;
}
}

<do not remove the three backticks above>

CSS is always lowercase. height.

UL class nav is in a container so can resized. Make it less than 100% width with margin: 0 auto to center the LI blocks. Unless it is required, I would not use padding, but instead use line-height to set the height of the nav block and vertically center the button text.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.