The icons in my crid cell wont align

Hey everyone.

I’m using CSS grid. No Bootstrap or JS.
I have 5 columns and 10 rows.
My footer uses all 5 colums in the 2nd row like I coded but it stacks the icons one on top of the other.

I think it’s the markup within the footer>

<footer>
          <div style="font-size:3em; color:whitesmoke">
         <i class="fas fa-file-pdf fa-2x"></i>
        </div>
       <div style="font-size:3em; color:whitesmoke">
         <i class="fas fa-camera-retro fa-2x"></i>
        </div>
            <div style="font-size:3em; color:Tomato">
  <i class="fab fa-twitter-square fa-2x"></i>
          </div>
          
       </footer>```

this is what my container class looks like

#content{
            display: grid;
            grid-template-columns: repeat(5,1fr);
            grid-auto-rows: minmax(100px, auto);
            max-width: 960px;
            margin: 0 auto; 
            grid-template-areas: 
                "header header header header header"
                "footer footer footer footer footer"
                "bio bio main main main"
                "bio bio main main main"
                "bio bio main main main"
                "work work work work work"
                "work work work work work"
                "work work work work work"
                "edu edu edu edu edu"
                "edu edu edu edu edu"
                "edu edu edu edu edu"```

I could always make them they’re own cell…:thinking:

I made them their own cells in the grid. But I can’t bring the icons down in their elements.
Margin or padding maybe?

grid-template-areas: 
              "header header header header header"
              "footer1 footer1 footer2 footer3 footer3"
///
footer1{
          grid-area: footer1;
      }
      footer2{
          grid-area: footer2;
      }
      footer3{
          grid-area: footer3;
      }
///
<footer1>
     <div style="font-size:3em; color:whitesmoke">
       <i class="fas fa-camera-retro fa-2x"></i>
      </div>
     </footer1>