Hey ya’ll! So I’m on my finishing touches and can not figure out how to adjust the spacing on my footer. Am I supposed to adjust the padding or margins on the column itself or the text? I tried both and nothing seems to work.
-------HTML------
<!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 Shutterbug</h1>
<h3>Capture the moments that matter.</h3>
<a href="#">Download Shutterbugg</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" alt="railroad"/>
</div>
<div class="col-md-6">
<h1>Share</h1>
<h3>Share your moments with the people that matter to you most. With Shutterbug, its easy to share with the right people.</h3>
</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>
<h3>Explore moments from your friends and family. Shutterbug makes it easy to see what's happening in the world and take in everything around you.</h3>
</div>
<div class="col-md-6">
<img id="pic2" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png" alt="mountain side"/>
</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" alt="university"/></div>
<div class="col-md-6">
<h1>Save</h1>
<h3>Save every photo you take. Shutterbugg auntomatically saves your photos so you can show them off from anywhere.</h3>
</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 id="company" class="col-md-4">
<h6>Company</h6>
<ul>
<li>Careers</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div id="products" class="col-md-4">
<h6>Products</h6>
<ul>
<li>Shutterbugg</li>
<li>Speakerboxx</li>
</ul>
</div>
<div id="news" class="col-md-4">
<h6>News</h6>
<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;
}
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: 25px;
}
h3{
margin-bottom:45px;
font-weight:lighter;
}
a {
background-color:rgba(238,68,95,0.9);
color:white;
font-size:18px;
font-weight: 200;
text-decoration:none;
padding:8px 30px 8px 30px;
border-radius:5px;
}
.main {
height: 550px;
padding-top: 55px;
background:url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
}
.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}
.section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}
.row h3{
line-height:40px;
width:380px;
}
.row #pic2{
padding-left:90px;
}
.store {
text-align: center;
border-bottom: 0px;
padding-bottom:100px
}
/*footer*/
.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}
.footer .col-md-4 {
float:left;
padding:20px;
}
.footer #company{
}
.footer #products{
}
.footer #news{
}
.footer h6 {
color:#555555;
font-size:16px;
}
.footer ul {
list-style-type: none;
padding-left:0;
}
.footer li {
color: #999;
font-weight: 600;
}
@media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
}
}
