Why are this two divs one next to each other, does someone know why this footer is not working?

Question

My intention is to display the logo and underneath of it, 3 buttons with all of the social media links. However, I don't know why, it makes my 2 divs display inline instead of flex or block. Does somebody know why is this not working?

.foot {
  background-color: #152238;
  width: 100%;
  height: 60vh;
  border-top: solid 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.foot h2 {
  font-size: 1.5rem;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color: #ffffff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<footer>
    <div class="foot">
      <div>
        <h2>Shop</h2>
      </div>
      <div>
        <button class="btn btn-info gmail"><i class="fa-regular fa-envelope"></i> Gmail</button>
        <button class="btn btn-info insta"><i class="fa-brands fa-instagram"></i> Instagram</button>
        <button class="btn btn-info tiktok"><i class="fa-brands fa-tiktok"></i> TikTok</button>
      </div>
    </div>
  </footer>

I've tried changing the display method, using bootstrap rows and even <br>.

Answer 1

By default, a flex-box will try to squeeze its items into a single row. To change this, you need flex-direction: column:

.foot {
  flex-direction: column;
}

Try it:

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #152238;
  width: 100%;
  height: 60vh;
  border-top: solid 2px #ffffff;
}

.foot h2 {
  font-size: 1.5rem;
  font-family: 'Kdam Thmor Pro', sans-serif;
  color: #ffffff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<footer>
    <div class="foot">
      <div>
        <h2>Shop</h2>
      </div>
      <div>
        <button class="btn btn-info gmail"><i class="fa-regular fa-envelope"></i> Gmail</button>
        <button class="btn btn-info insta"><i class="fa-brands fa-instagram"></i> Instagram</button>
        <button class="btn btn-info tiktok"><i class="fa-brands fa-tiktok"></i> TikTok</button>
      </div>
    </div>
  </footer>

Answer 2

if you want to use flex, you need to specify the direction of the items. Flex comes with different directions:

row | row-reverse | column | column-reverse;

Since you want to display them on top of each other, just add this to your foot class:

flex-direction: column;