grid-template-columns doesnt adjust my grids-CodePudding

i am trying getting into html and css and currently trying to do a website. I want to have 4 boxes allign each by side (like a navbar just with box items).

i have these boxes

<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>

thats my html page

and on my css page i have this

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

For some reason it doesnt move the grids side by side they only go down. Can someone give me a direction maybe i am really clueless. thanks:)

CodePudding user response：

It was giving you this issue because your HTML tags were not correctly closed. Here you go :

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

<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>
  <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>
</section>