Lining up header in headlines


#1

Hi. I am having troubles lining up the rows in my header. My right column does not sit in line with the right line.

The headline should line up with the menu. I am not sure which element to change.

HTML

<head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-m2-3">
            <h1>Headlines.</h1>
          </div>
       
          <div class="col-m2-9">
            <ul class="nav nav-tabs pull-right">
              <li><a href="#">About</a></li>
              <li><a href="#">Our Services</a></li>
              <li><a href="#">Our Team</a></li>
              <li><a href="#">Contact Us</a></li>  
            </ul>
          </div>
        
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h2>We <span>collect and curate</span> <br>articles, opinions, and images<br> from around the world.</h2>
      </div>
    </div>

    <div class="banner">
      <div class="container">
        <h1>The Bottom Line.</h1>
        <p>We deliver the news that is relevant to you.</p>
      </div>
    </div>

    <div class="cards">
      <div class="container">
        <h2>Our Expertise.</h2>
        <div class="row">
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p1.jpg"/>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p2.jpg"/>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p3.jpg"/>
          </div>
          
       
        
        
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p6.jpg"/>           
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p5.jpg"/>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p4.jpg"/>
          </div>
        
        
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg"/>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p8.jpg"/>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p9.jpg"/>
            <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p10.jpg"/>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="container">
      </div>
    </div>

  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', sans-serif;
}
.header{
  display: block;
  
}
.container {
  max-width: 980px;
  margin: 0 auto;
  
  
}
.row {
    margin-right: -15px;
    margin-left: -15px;
  
}
.header h1 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.jumbotron {
  background-color: transparent;
  padding-top: 48px;
  padding-bottom: 48px;
  margin-bottom: 60px;
}
.jumbotron h2{
  font-size: 50px; 
}
.jumbotron h2 span{
  color: #ffc200;
}
.banner {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}
.cards{
  background: #ffc200;
 text-align: center;
  
  
}
img {
  padding: 13px 0px 13px 0px;   
}
.cards h2{
  font-size: 30px;
  margin: 20px 0 60px 0;
  text-align: center;
  padding-top: 80px;
}
@media (max-width: 992px) {
  .col-md-4 {
    margin: 0 auto 0;
    text-align: center;
    width: 100%;
  }
  .cards img {
    width: 60%;
  }
}

@media (max-width: 500px) {
  .header h1 {
    text-align: center;
  }

  .nav li {
    text-align: center;
    width: 100%;
  }

  .cards img {
    width: 100%;
  }

#2

i fixed it, see this bin, you need to use col-md-9 and col-md-3 which are the bootstrap classes, you seemed to have replace md with m2, then it obviously doesn't work


#3

Oh Thank you very much. Guess that is a good lesson for me to check the html code a bit better.


#4

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