CSS/ HTML Empty Space issue with Div alignment

Question

i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:

i know it must be a simple question but i couldn't get it to get aligned

Answer 1

---

As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.

Another thing that you can do is to make your layour like:

2x2

-1-

2x2

Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.

Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.

Answer 2

You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)