I have a small problem with my footer for a website I have made. So there is 2 sections:
- On the top: `.footer-sections` with 3 `div`
- On the bottom: `.footer-bottom` with just a `p`
[image here](https://i.stack.imgur.com/JcIAf.png)

I figured out what is the problem but I don't know how to fix it: the first child of `.footer-sections` is denser and it is taking more than 1/3 of the space (I am guessing). 

```css
.footer {
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 50px;
  bottom: 0;
  width: 100%;
}

.footer .footer-sections {
  display: flex;
  justify-content: space-between;
}

.footer .footer-sections div {
  padding: 2rem 0rem;
  top: 0;
}

.footer .footer-sections p {
  font-size: 14px;
}

.footer .footer-bottom {
  text-align: center;
}

.footer .footer-bottom p {
  font-size: 14px;
}

.footer ul {
  list-style: none;
}

.footer ul li {
  font-size: 14px;
  color: #fff;
}
```

```html
<div class="footer">
  <div class="footer-sections">
    <div class="adress-footer">
      <h4>Contact</h4>
      <p>102, Pyidaungsu Yeithka Road, Yangon, Myanmar</p>
      <p>+33 6 24 15 14 02</p>
      <p>contact@hrasia.com</p>

    </div>
    <div class="menu-footer">
      <h4>Operating Hours</h4>
      <p>Monday - Friday : 8 a.m - 5 p.m</p>
      <p>Saturday : 9 a.m - 1 p.m</p>
      <p>Sunday : closed</p>
    </div>
    <div>
      <h4>Blog</h4>
      <p>Read our latest posts</p>
      <p>How to write a resume ?</p>
      <p>The interview process</p>
    </div>

  </div>
  <div class="footer-bottom">
    <p>&copy; hrasia.com | Designed by Lorem</p>
  </div>

</div>
```