Icon not align with desc

HTML-CSS
#1

I’m not sure what is wrong with my code, i just can’t align the icon with the desc. Can anyone pointed out where I’m doing wrong?

<section id="features">
  <div class="grid">
    <div class="icon"><i class="fa fa-child fa-3x" aria-hidden="true"></i></div>
    <div class="desc">
      <h2>Premium Ingredients</h2>
      <p>Our burgers only use ingredients that locally sourced and grown, providing complete nutrients for your daily food intake</p>
    </div>
  </div>

#features .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: tomato;
}

icon (2)
icon (2)1015×360 13.2 KB

#2

@hudarashid87
You are applying CSS on the section id this is where you went wrong. To make the icon align with your description apply display: flex to the grid class.

Demo

<!-- Html -->

<section id="features">
  <div class="grid">
    <div class="icon">
      <i class="fa fa-child fa-3x" aria-hidden="true"></i>
    </div>
    <div class="desc">
      <h2>Premium Ingredients</h2>
      <p>Our burgers only use ingredients that locally sourced and grown, providing complete nutrients for your daily food intake</p>
    </div>
  </div>
  </section>

/* css */

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  margin-right: 2rem;
  color: tomato;
}

help

Happy Coding !

#3

@n3tspid3r this is working, thank you!

1 Like