divs are not aligned in the same row?

Question

I have a bootstrap layout problem which I couldn't figured out how to solve.

On my page, I present 6 recent cars and on the desktop view, I would like to have 3 cars per row so each of the car reside inside a bootstrap div container:col-md-4 col-sm-6 col-xs-12

Car images are responsive. Although resized images sizes are identical, if the original resolutions of the cars are slightly different, my desktop layout is distorted as you can see below.

Below you can see the html & css code

<div class="container">
<!-- Section Header -->
<div class="section-header">
  <h3>Son Eklenen Arabalar</h3>
  <p>Farklı bütçe ve ihtiyaçlara göre zengin araba seçeneklerimizi görmek için, satılık araçlar bağlatısına tıklayabilirsiniz. Aşağıda son eklenen araçlarımızdan kısaca örnekleri görmektesiniz.</p>
</div><!-- Section Header /- -->

<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2016-audi-a3-a3-sedan-1-6-tdi-sport-line-dizel-otomatik-beyaz-379" title="2016 Audi A3İncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5244/_MG_0230.jpg?1523107625" alt="sahibinden satılık araba 2016 Audi A3 A3 Sedan 1.6 TDI Sport Line Dizel Otomatik 19000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2016-audi-a3-a3-sedan-1-6-tdi-sport-line-dizel-otomatik-beyaz-379" title="2016 Audi A3İncele">
        <h3>Audi A3</h3>
        <span>2016</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2013-hyundai-i30-1-6-crdi-style-dizel-otomatik-beyaz-378" title="2013 Hyundai i30İncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5229/_MG_0208.jpg?1523106439" alt="sahibinden satılık araba 2013 Hyundai i30 1.6 CRDi Style Dizel Otomatik 42840 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2013-hyundai-i30-1-6-crdi-style-dizel-otomatik-beyaz-378" title="2013 Hyundai i30İncele">
        <h3>Hyundai i30</h3>
        <span>2013</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2017-peugeot-3008-1-6-bluehdi-allure-dizel-otomatik-kirmizi-373" title="2017 Peugeot 3008İncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5199/_MG_0981.jpg?1517238228" alt="sahibinden satılık araba 2017 Peugeot 3008 1.6 BlueHDi Allure Dizel Otomatik 8000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2017-peugeot-3008-1-6-bluehdi-allure-dizel-otomatik-kirmizi-373" title="2017 Peugeot 3008İncele">
        <h3>Peugeot 3008</h3>
        <span>2017</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2014-citroen-c-elysee-1-6-hdi-attraction-dizel-manuel-beyaz-376" title="2014 Citroen C-Elyseeİncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/4534/_MG_0133.jpg?1506524742" alt="sahibinden satılık araba 2014 Citroen C-Elysee 1.6 HDi Attraction Dizel Manuel 117220 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2014-citroen-c-elysee-1-6-hdi-attraction-dizel-manuel-beyaz-376" title="2014 Citroen C-Elyseeİncele">
        <h3>Citroen C-Elysee</h3>
        <span>2014</span>
        <span>Dizel</span>
        <span>Manuel</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-beyaz-374" title="2015 Skoda Octaviaİncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5208/_MG_0966.jpg?1517238488" alt="sahibinden satılık araba 2015 Skoda Octavia 1.6 TDI Style CR Dizel Otomatik 53000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-beyaz-374" title="2015 Skoda Octaviaİncele">
        <h3>Skoda Octavia</h3>
        <span>2015</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->
<!-- Row -->
<div class="col-md-4 col-sm-6 col-xs-12 inventroy-box">
  <div itemscope="" itemtype="http://schema.org/Car" class="item">
    <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-siyah-372" title="2015 Skoda Octaviaİncele">
        <img itemprop="image" src="https://s3-eu-central-1.amazonaws.com/otogallery/store_logos/thumb/5183/_MG_0956.jpg?1517237745" alt="sahibinden satılık araba 2015 Skoda Octavia 1.6 TDI Style CR Dizel Otomatik 73000 KM">
    </a>
    <div class="inventroy-content">
      <a itemprop="url" href="/ikinci-el/2015-skoda-octavia-1-6-tdi-style-cr-dizel-otomatik-siyah-372" title="2015 Skoda Octaviaİncele">
        <h3>Skoda Octavia</h3>
        <span>2015</span>
        <span>Dizel</span>
        <span>Otomatik</span>
      </a>
    </div>
  </div>
</div><!-- Row /- -->

.inventroy-box {
    text-align: center;
    margin-bottom: 30px;
}
@media (min-width: 992px)
.col-md-4 {
    width: 33.33333333%;
}

img {
    max-width: 100%;
    height: auto;
}

img {
    border: 0;
    vertical-align: middle;
}

Can you please guide me how to solve this issue?

Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](https://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](https://meta.stackexchange.com/questions/125997/) Thanks! — j08691, Apr 09 '18 at 18:28

score 2 · Accepted Answer · answered Apr 09 '18 at 18:42

For the bootstrap classes to work, they must be contained inside a <div> with a class of row. Example here:

<div class="row">
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
    <div class="col-lg-4 col-sm-6"></div>
</div>

score -1 · Answer 2 · answered Apr 09 '18 at 18:38

This happens because of the irregular height of images or content. I think you want something like this: https://prnt.sc/j302vm Let's just say you are using this code.

<div class='row'>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
<div class='col-md-4 col-sm-6 col-xs-12'>
</div>
</div>

So you nedd to Apply clear both properties at the first div of right hand side.

So apply this css:

    @media(min-width: 992px){
    .col-md-4:nth-of-type(3n+1){
    clear:both;
    }
  }
    @media (min-width: 768px) and (max-width:991px){
     .col-sm-6:nth-of-type(2n+1){
        clear:both;
        }
    }

divs are not aligned in the same row?

2 Answers2