Centering columns using media queries bootstrap

Question

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:

@media(max-width: 576px)
{
.first-pic-container {
    float: none;
    margin: 0 auto;

}

But it doesn't do much. I have also tried using Bootstrap's offset class but that doesn't do anything either.

Here's the relevant HTML:

<div class="col-sm-4 first-pic-container">
    <img class="first-step" src="step1image.png" alt="firstpic">
                <div class= "row">
                    <div class="col-sm-12 col-md-12 col-lg-10 first-p-container">
     <p class="step-one-p"> Enter the classes you are looking to take for next semester! </p>
                    </div>
                </div>
            </div>

And the codepen for visual reference. I added borders around the firstpic and first-pic-container which I am trying to center: https://codepen.io/gkunthara/pen/VWdrYj

Answer 1

Give text-align: center to first-pic-container

@media(max-width: 576px) {
        .first-pic-container {
            text-align: center;
        }
    }

Answer 2

Images are a inline elements by default so you only need to add text-align: center; to it's parent element. If you want to use margin: 0 auto; then you need to set the image to display: block;