Shutterbug Footer is stacking for some reason


#1

I have been trying to get the footer lists to be inline but they are stacking one on top of each other. Shouldnt the bootstrap make them inline automatically or do I have have to add css to it? I have tried my browser and full width and they still wont go inline. Any tips? This is my code.

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- The main section -->
    <div class="main">
      <div class="container">
        <h1>
          Introducing Shutterbugg
        </h1>
        <p>
          Capture the moments that matter.
        </p>
        <a href="#"><p class="btn">
          Download Shutterbugg
          </p></a>
        
      </div>
    </div>

    <!-- The first section div -->
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
          </div>
          <div class="col-md-6">
            <h1>
              Share
            </h1>
            <p>
              Share your moments with the people who matter to you most. With Shutterbugg, it's easy to share with the right people.
            </p>
          </div>
        </div>

      </div>
    </div>

    <!-- The second section div -->
    <div class="section">
      <div class="container">
				<div class="row">
          <div class="col-md-6">
            <h1>
              Explore
            </h1>
            <p>
              Explore moments from your friends and family. Shutterbugg makes it easy to see what's happening in the world and take in everything around you.
            </p>
          </div>
          <div class="col-md-6">
							<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">         
          </div>
        </div>
      </div>
    </div>

    <!-- The third section div -->
    <div class="section">
      <div class="container">
<div class="row">
          <div class="col-md-6">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
          </div>
          <div class="col-md-6">
            <h1>
              Save
            </h1>
            <p>
             Save every photo you take. Shutterbugg automatically saves your photos so you can show them off from anywhere.
            </p>
          </div>
        </div>
      </div>
    </div>

    
    <div class="store section container">
      <h2>Available for iPhone, iPad, and Android.</h2>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
      <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
    </div>

    <!-- The footer div -->
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <h3>
              Company
            </h3>
            <ul>
          <li>Careers</li>
          <li>Terms</li>
              <li>Help</li>
            </ul>
          </div>
        </div>
         <div class="row">
          <div class="col-md-3">
            <h3>
              Products
            </h3>
            <ul>
              <li>Shutterbugg</li>
              <li>Speakerboxx</li>
            </ul>
          </div>
        </div>
         <div class="row">
          <div class="col-md-3">
            <h3>
             News
            </h3>
            <ul>
              <li>Blog</li>
              <li>Twitter</li>
              <li>YouTube</li>
              <li>Google+</li>
              <li>Facebook</li>
            </ul>
          
          </div>
        </div>
        </div>
      </div>
   

  </body>
</html>

css

.container {
  max-width: 928px;
  padding:0 15px;
  margin:0 auto;
}

h1, h2, p, a {
  font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}

h1 {
  font-size: 64px;
  font-weight: 100;
  margin-bottom: 20px;
}

a {
  font-size:18px;
  font-weight: 200;
}

.main {
  height: 550px;
  padding-top: 55px;
  background-image:url('https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg');

}
 .btn {
  padding:8px 30px;
  background-color:rgba(238,68,95,0.9);
  color:#fff;
   border-radius:4px;
   transition:box-shadow 0.5s;
  
}
.btn:hover{
  background-color:rgba(238,68,95,1);
  text-decoration:none;
  border-radius:4px;
  color:#fff;
  padding:8px 30px;
  transition:box-shadow 0.25s;
  box-shadow: 0px 1px 6px rgba(0,0,0,0.6);
  
}

.main p {
  font-size: 26px;
  font-weight: 200;  
  margin-bottom: 40px;
}
/*******************************section *********************/
 .section p {
  font-size: 26px;
  font-weight: 200;  
  margin-bottom: 40px;
}

.section .row {
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #dbdbdb;
}



.store {
  text-align: center;
  border-bottom: 0px;
  padding-bottom:100px
}

.footer {
  border-top: 1px solid #dbdbdb;
  background-color: #f3f3f3;
  padding: 20px 0px 80px;
  color:#555;

}

.footer ul {
  list-style-type: none;
  padding-left: 0;
}

.footer li {
  color: #555;
  font-weight: 600;
}


@media (max-width: 500px) {
  .col-md-6 img {
    padding: 50px;
    width: 100%;
  }
}

#2

Bah. I just figured it out. I put a row over each instead of one for the whole section.:fearful:


#3

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