Bolt Network-Padding/margin issues around thumbnail images


#1

Hi, I have a question about how to layout the thumbnail images properly. They are all positioned properly in rows and columns, but the padding or margin on the top and bottom of each row is wrong and in some places the padding is correct on the right and left and in others it is not. I tried inspecting the elements in my chrome browser, but I just can't find the issue. Thanks in advance for any help! :slight_smile: Here is my code:

<div class="supporting">
      <div class="container">
        <h2>A world of movies at your fingertips.</h2>
        <p>Choose from the latest titles, with new movies added every day.</p>
        <div class="row">
          <div class="col-md-8">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-avengers.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/harry-potter.jpg">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/frozen.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/iron-man.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/transformers.jpg">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/lord-of-the-rings.jpg">
            </div>
          </div>
          <div class="col-md-8">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/skyfall.jpg">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-dark-knight.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/pirates-of-the-caribbean.jpg">
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/toy-story-3.jpg">
            </div>
          </div>
        </div>

      </div>
    </div>

and here is my CSS

html, body {
  background-image: url(https://s3.amazonaws.com/codecademy-content/projects/bolt-network/diagmonds_@2X.png);
  background-size: 141px 142px;
  font-family: "Oxygen", sans-serif; 
  font-weight: 300; 
  margin: 0;
  padding: 0;
}
.container {
  max-width: 970px;
}
.header li {
  display: inline;
  margin-right: 30px;
}
.main {
  text-align: center;
  color: #fff;
}
form {
  margin-top: 80px;
}
.supporting {
  padding-bottom: 80px;
  background-image: url(s3.amazonaws.com/codecademy-content/projects/bolt-network/diagmonds_@2X.png);
  background-size: 141px 142px;
}
.jumbotron {
  background-color: #000;
  height: 600px;
}
.jumbotron li a {
  color: #0393FF;
}
.header {
  color: #fff;
}
.jumbotron h1 {
  color: #fff;
  font-weight: 300;
  margin-top: 80px;
  margin-bottom: 40px;
  text-align: center;
}
.jumbotron .btn {
  color: #0393ff;
  background: transparent;
  border: 1px solid #0393ff;
  border-radius: 2px;
  padding: 8px 20px;
}
.form {
  margin-top: 80px;
}
#search {
  background: transparent;
  border: 0px;
  border-radius: 0;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-size: 18px;
  margin: 0 20px;
  width: 400px;
}
.jumbotron {
  background-color: #000;
  height: 600px;
}
.supporting {
  padding-bottom: 80px;
}
.supporting h2 {
  color: #0393ff;
  margin-top: 60px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 300;
  text-align: center;
}
.supporting p {
  margin-bottom: 45px;
  font-size: 16px;
  color: #fff;
  text-align: center;
} 
.supporting .thumbnail {
  background: transparent;
  border: none;
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.thumbnail {
  background: none;
}
.feature {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/bolt-network/feature.jpg) no-repeat center center;
  background-size: cover;
  height: 380px;
  padding: 100px 0 0 0;
}
.feature h1 {
  color: #0393ff;
  margin-top: 60px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 300;
  text-align: center;
}
.feature p {
  font-size: 18px;
  color: #fff;
  text-align: center;
}
.footer {
  background: #000;
  padding: 60px 0;
}
.footer h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
}
.footer ul {
  color: #0393ff;
  list-style: none;
  padding-left: 0px;
}