My images are not being displayed in a row

Question

In a section of my code I made a row-grid for a part that displays images but when I went to insert and look at the website its not displaying in a row format but in a column and im not sure why. I thought the problem came from it being col-sm-6 but i changed it to col-sm-12 and its still not displaying it. Any reasons why?

.site-main .project-area {
  padding: 4rem 0;
}

.site-main .project-area .button-group button {
  background: transparent;
  border: none;
  font: normal 500 16px/130px var(--lato);
  text-transform: uppercase;
}

.site-main .project-area .button-group button+button {
  padding-left: 3rem;
}

.site-main .project-area .grid .our-project>title h4 {
  font: normal 700 25px/12px var(--lato);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section class="project-area">
  <div class="container">
    <div class="project title pb-5">
      <h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
      <h1 class="h1 text-uppercase title h1"> Quality Work</h1>
    </div>
    <div class="div button-group">
      <button type="button" class="active">All</button>
      <button type="button" data-filter=".cars">Cars</button>
      <button type="button" data-filter=".character">Characters</button>
      <button type="button">Food</button>
      <button type="button">Activities</button>
    </div>

    <div class="row-grid">
      <div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/car.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">minimul design</h4>
            <span class="text-secondary">Latest, Popular</span>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 element-item character">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/images.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">video game character</h4>
            <span class="text-secondary">popular, Portfolio</span>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">minimul design</h4>
            <span class="text-secondary">Latest, Popular</span>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">minimul design</h4>
            <span class="text-secondary">Latest, Popular</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>