title: Centering columns using media queries bootstrap
body: <p>I am trying to work on responsive web design, specifically on centering images that are within a column container when hitting screen size of 576px. I've tried this statement that I have seen elsewhere:</p>
  
  <pre><code>@media(max-width: 576px)
  {
  .first-pic-container {
      float: none;
      margin: 0 auto;
  
  }
  </code></pre>
  
  <p>But it doesn't do much. I have also tried using Bootstrap's <code>offset</code> class but that doesn't do anything either.</p>
  
  <p>Here's the relevant HTML:</p>
  
  <pre><code>&lt;div class="col-sm-4 first-pic-container"&gt;
      &lt;img class="first-step" src="step1image.png" alt="firstpic"&gt;
                  &lt;div class= "row"&gt;
                      &lt;div class="col-sm-12 col-md-12 col-lg-10 first-p-container"&gt;
       &lt;p class="step-one-p"&gt; Enter the classes you are looking to take for next semester! &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And the codepen for visual reference. I added borders around the <code>firstpic</code> and <code>first-pic-container</code> which I am trying to center: <a href="https://codepen.io/gkunthara/pen/VWdrYj" rel="nofollow noreferrer">https://codepen.io/gkunthara/pen/VWdrYj</a></p>