Creating a footer using flexbox

Issue

I've been trying really hard to do this but I'm really y confused. I trying to create the footer of this site without using floats, with flex. Basically, I have three sets of <ul>, one for Navigation, one for Follow Us, and another one for Contact. Again, I know how to do this with regular css using floats, the challenge is my flex, not good enough.

Solution

A div was added in order to group each list in a different container. Making the divs the only flex items.

<footer> 
  <div>
    <h2 class="footer__headline">Navigation</h2>
    <ul class="footer__list">
      <li>nav 1</li>
      <li>nav 2</li>
      <li>nav 3</li>
      <li>nav 4</li>
      <li>nav 5</li>
      <li>nav 6</li>
      <li>nav 7</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Follow Us</h2>
    <ul class="footer__list">
      <li>social 1</li>
      <li>social 2</li>
      <li>social 3</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Contact</h2>
    <ul class="footer__list">
      <li>Adress</li>
      <li>Phone</li>
      <li>Email</li>
      <li>Website</li>
    </ul>
  </div>
</footer>

On CSS, all you have to do is apply on the footer display:flex and justify-content. justify-content will align the list's containers depending on the attribute (space-between, space-around, center, etc) used, in this case space-around, which will assign an equal space on each side of the flex items. You could also use margins to separate the container. After having all the content arranged, we only have to remove the padding and default style from the uls

footer {
  display: flex;
  justify-content: space-around;
}

.footer__headline {
  font-weight: bold;
  font-family: 'Helvetica';
}

.footer__list {
  font-family: 'Helvetica';
  list-style: none;
  padding: 0;
  margin: 0;
}

Answered By - Victor Santizo