Footer has white space above it

My footer has a thin white space above it, separating it from the rest of the content, any suggestions or tips are much appreciated on how to fix this so the footer takes up that space... thanks!

All the code for this project is on codepen https://codepen.io/codinchopin2117/pen/NWrvgva

Here's a snippet of the area I'm having problems with

<container class="container">  
    <i class="fa fa-instagram" style="font-size:50px"></i>
    <i class="material-icons" style="font-size: 50px;">facebook</i>
    <i class="material-icons "style="font-size:50px">map</i>
    <i class="material-icons" style="font-size:50px">phone</i>

  .container {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
   margin: 0;
  padding: 0;
    }

 .fa-instagram {
 margin: 15px;
 padding: 10px;
  }
  .material-icons {
   margin: 15px;
  padding: 10px;

     }

Solution

That's because of p tag style.

Now, on the snippet, p tag has got default margin-bottom: 1rem css style because of the preloaded library css files on head tag.

So it is needed to overwrite that style to margin-bottom: 0 as follows.

...
        <p style="text-align: center; padding-top: 20px; margin-bottom: 0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>

<footer class="footer">
    <p style="font-family: 'Buena-Park-JF', serif; font-weight: 400; font-style: normal; font-size: 40px; text-align: center;"> Find Us!</p>
...