title: I have two items that appear to be centered in the code and individually on the page, but when aligned they are not
body: <p>I have a button near the bottom of the page that is centered. Additionally, I have three images that I centered by making each image a col-lg-2 with 3 empty columns in between each one. I cannot figure out why these two items don't line up nicely, and which one is the one that is off center.</p>
  
  <p><a href="https://codepen.io/colesam/full/OgamyB/" rel="nofollow noreferrer">https://codepen.io/colesam/full/OgamyB/</a></p>
  
  <p><a href="https://i.stack.imgur.com/UwIib.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UwIib.png" alt="enter image description here"></a>
  SCSS:</p>
  
  <pre><code>a {
      color: $blue;
      font-size: 1.4vw;
      font-weight: 500;
      line-height: 1.7vw;
      transition: all 0.2s;
  
      &amp;:hover {
          color: $orange;
          font-size: 1.7vw;
          cursor: pointer;
          text-decoration: none;
      }
  
      &amp;:focus {
          color: $blue;
          text-decoration: none;
  
          &amp;:hover {
              color: $orange;
              cursor: pointer;
          }
      }
  }
  
  body {
      background: white;
      color: $black;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      text-shadow: $text-shadow-light;
  }
  
  h2 {
      font-size: 5vh;
      margin-top: 5vh;
  }
  
  p {
      font-size: 3vh;
      letter-spacing: 2px;
      margin-top: 3vh;
      text-shadow: none;
  }
  
  .btn-next {
      bottom: 0;
      padding-bottom: 5vh;
      position: absolute;
      text-align: center;
      transition: all 0.3s;
  
      a {
          font-size: 5vw;
  
          &amp;:hover {
              font-size: 5.5vw;
          }
      }
  }
  
  .center-text {
      text-align: center;
  }
  
  .left-text {
      text-align: left;
  }
  
  .no-margin {
      margin: 0;
  }
  
  .right-text {
      text-align: right;
  }
  
  .title {
      padding-left: 4vw;
  
      h3 {
          font-size: 3vw;
          text-shadow: $text-shadow;
      }
  }
  
  #portfolio-page {
      min-height: 100vh;
      position: relative;
  }
  
  h4 {
      font-size: 2vw;
  }
  
  .active-item {
      box-shadow: $box-shadow-o;
          -moz-box-shadow: $box-shadow-o;
          -webkit-box-shadow: $box-shadow-o;
  }
  
  .btn-portfolio {
      padding-top: 20vh;
      text-align: center;
      transition: all 0.3s;
  
      a {
          font-size: 5vw;
  
          &amp;:hover {
              font-size: 5.5vw;
          }
      }
  }
  
  #featured-content {
      background: rgba(0, 0, 0, 0.1);
      height: 65vh;
      margin-top: 2vh;
      padding: 3vh 0;
  }
  
  #featured-img img {
      box-shadow: $box-shadow-light;
          -moz-box-shadow: $box-shadow-light;
          -webkit-box-shadow: $box-shadow-light;
  }
  
  #primary-featured {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      height: 45.5vh;
      top: 10%;
  }
  
  #secondary-featured {
      margin-top: 3vh;
  }
  </code></pre>
  
  <p>HTML(inside a div.container):</p>
  
  <pre><code>&lt;div id="portfolio-page"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-4 col-lg-offset-4"&gt;
              &lt;h2 class="center-text"&gt;My Portfolio&lt;/h2&gt;
              &lt;hr&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12" id="featured-content"&gt;
              &lt;div class="row no-margin"&gt;
                  &lt;div class="col-lg-1 btn-portfolio" id="left-button"&gt;
                      &lt;a&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-8 col-lg-offset-1" id="primary-featured"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-5" id="featured-img"&gt;
                              &lt;img src="includes/img/headers.jpg" alt="A cluster of header images." class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-6 col-lg-offset-1" class="center-text"&gt;
                              &lt;h4 id="featured-title"&gt;Placeholder&lt;/h4&gt;
                              &lt;hr&gt;
                              &lt;p id="featured-description"&gt;Placeholder text.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-1 col-lg-offset-1 btn-portfolio" id="right-button"&gt;
                      &lt;a&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-6 col-lg-offset-3" id="secondary-featured"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-2" id="secondary-feature1"&gt;
                              &lt;img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-2 col-lg-offset-3" id="secondary-feature2"&gt;
                              &lt;img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive"&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-2 col-lg-offset-3" id="secondary-feature3"&gt;
                              &lt;img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12 btn-next"&gt;
              &lt;a&gt;
                  &lt;i class="glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>