How can i make them line up horizontal

HTML-CSS
1

I want em to look like this. https://gyazo.com/17b54833353dbdf5980511ba3879a700

I’m pretty sure its grid but i just can’t get it to work looks like crap.

2

You can use bootstrap to break that into 1 row of 4 columns

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
<div class="col-sm">
      One of four columns
    </div>
  </div>
</div>
3

Cool i would like to know how to do it with grid without bootstrap how would i do that?

4

Me linking to bootstrap destroys my hole layout. Almost everything gets bigger or get pushed to the left and other weird stuff.

i fixed it by giving grid-template-columns: repeat(4,1fr) and then the dekstop thing was weird so i gave it a padding: 0;

https://gyazo.com/09e6f9780521c96b626137b93c5be1aa