'grid-template-columns doesnt adjust my grids

I am trying to get into HTML and CSS and currently trying to do a website. I want to have 4 boxes aligned side by side (like a navbar just with box items). So I created these boxes:

HTML:

<section class="boxes">  
<div class ="box">
    <i class="fas fa-chart-pie fa-4x"></i>
    <h3>Analytics</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    <div class ="box">
        <i class="fas fa-globe fa-4x"></i>
        <h3>Marketing</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </div>
    <div class ="box">
        <i class="fas fa-cog fa-4x"></i>
        <h3>Development</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </div>
    <div class ="box">
        <i class="fas fa-users fa-4x"></i>
        <h3>Support</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </div>
</div>

CSS:

.boxes{
  display:grid;
  grid-gap:20px;
  grid-template-columns:repeat(4,1fr);
}

For some reason it doesn't move the grids side by side they only go down. Can someone give me a direction ?

htmlcsscss-grid


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions