Spacing out the Pictures/Links


#1


Hello guys,

I've stumbled on a problem that I have been working on for a couple of days and it's having to put some space between the images that are meant to be inside of a link. in the example, you can clearly see there is about 10px of margin around the pictures but I'm having a hard time making it happen on the project. Is there someone out there kind enough to explain what I can do to help separate them?

I will clarify that I have changed the margin on CSS of .main img { ...} and it has given some results but it doesn't apply the margin spacing between the images

<!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>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h1>Armandos Perez</h1>
        </div>
          <div class="pull-right">
            <ul class="nav nav-pills">
              <li class="active"><a href="#">All</a></li>
              <li><a href="">Consumer</a></li>
              <li><a href="">Mobile</a></li>
              <li><a href="">Commerce</a></li>
              <li><a href="">Enterprise</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="container">
        
        <!-- FIRST ROW  -->
        
        <div class="row">
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p1.jpg" /></a>
          </div>
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p2.jpg" /></a>
          </div>
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p3.jpg" /></a>
          </div>
        </div>
        
        <!-- SECOND ROW -->
        
        <div class="row">
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p4.jpg" /></a>
          </div>
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p5.jpg" /></a>
          </div>
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p6.jpg" /></a>
          </div>
          
          
        </div>
        
        <!-- THIRD ROW -->
        
        <div class="row">
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p7.jpg" /></a>
          </div>
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p8.jpg" /></a>
          </div>
          <div class="col-md-4">
            <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/armando-perez/p9.jpg" /></a>
          </div>
        </div>
        
        
        
      
      
      
      
      </div>
    </div>
    

  </body>
</html> 



<!-- HERE IS THE CSS -->


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

body {
  background: url("https://s3.amazonaws.com/codecademy-content/projects/armando-perez/brand.jpg") no-repeat;
  background-size: cover;
}

.header h1 {
  color: white;
  float: left;
  padding-top: 15px;
}

.header li {
  display: inline-block;
  margin-top: 45px;
}

.header a {
  color: red;
}

.header a:hover {
  color: red;
  background: lightgray;
}

.main img {
  margin: 5px;
}


#2

THIS IS WHAT MINE LOOKS LIKE

THIS IS WHAT THE EXAMPLE LOOKS LIKE


#3

please this:

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element (source)

i highly recommend using img-responsive so the image scale nicely to the parent (col-md-4)


#4

thank you so much, that worked!


#5