Html figure element

Hey guys I am taking doing the Codebrainery.io on the Make a Website course. I’m wondering why the Images in the code below are displaying with a higher z-index and on the right side of my webpage, rather then in line like it does in the video.
Here is the code below:

<div class="row">
          <figure class="col-sm-4">
            <img src="/uploads/short-url/aZINmFyiJCSPHX5YknQPJqjNWGM.png">
          </figure>
          <figure class="col-sm-4">
            <img src="/uploads/short-url/u6oamOjH0ounmOOT32P60PE1Aba.png">
          </figure>
          <figure class="col-sm-4">
            <img src="/uploads/short-url/stCgoVXRS3LSmL802dTIkCyoMJc.png">
          </figure>
        </div>
        <div class="row">
          <figure class="col-sm-4">
            <img src="/uploads/short-url/sxPpORXRpuJjnJiGXA2mHR6gfJD.png">
          </figure>
          <figure class="col-sm-4">
            <img src="/uploads/short-url/28qRucLlUlnth2D7qbXiBtPJDzj.png">
          </figure>
          <figure class="col-sm-4">
            <img src="/uploads/short-url/5yuYknMjqfcdZ3XsqHcLgDrOcY9.png">
          </figure>
        </div>
      </section>

z-index resolves which element is in front or behind, the z-axis runs through your screen in essence. Not sure how that is related to right side

i think the problem has to do with the cols, col-sm is for specific screen widths:

https://getbootstrap.com/docs/3.4/css/#grid-options

Yeah, I’ve helped folks troubleshoot Bootstrap layouts before, and there are so many options, funky things can happen and you just don’t know why. My advice is to bust out the Chrome devTools, inspect all your margins, padding, etc., and go from there.