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