css - How to align items in HTML using Flexbox

Question

I want my items to be placed in a specific order, so that the title (The header with the copyright paragraph) to be centered in the middle of the page my About section to not fill up half of my page ... I've tried using flex-basis so that I can give every item a specific width but didn't seem to work, any ideas? Here is the code for the footer part, I have this problem for both navbar and footer, but I guess if it will work for one it will work in general Also PM : I don't know why most of the html code dosen't show with snippet , here is an image of how it looks https://imgur.com/4xXP36C

HTML CODE :

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 100%;
}

.container {
  max-width: auto;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
  align-self: start;

}

.bg-dark,
.btn-dark {
  background-color: var(--dark-color);
  color: #fff;
}
.footer .box a{

  margin: 0 5px;
}
.lead {
  font-size: 20px;
}
.py-1 {
  padding: 1rem 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<footer class="footer bg-dark ">
    <div class="container flex lead py-1">
       <div class="box">
           <h1>About</h1>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?</p>
       </div> 
       <div class="box">
        <h1>CarolandHousing</h1>
        <p>Copyright &copy; 2021</p>
        </div>
        <div class="box">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="docs.html">Docs</a></li>
                    <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
                    <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
                </ul>
            </nav>
        </div>
     </div>
</footer>

Answer 1

Please find below the updated code according to your requirements which are as follows:-

1. All three columns in flex take equal width (33%)
2. Optional: Links removing list style and right align for better UI

.flex {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 100%;
}

.container {
  max-width: auto;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
  align-self: start;
  
}

.flex-basis-3{
  flex-basis: 33%
}

.text-center{
  text-align: center
}

.text-right{
  text-align: right
}

.no-list{
  list-style: none;
}

.bg-dark,
.btn-dark {
  background-color: var(--dark-color);
  color: #000;
}
.footer .box a{
  margin: 0;
}
.lead {
  font-size: 20px;
}
.py-1 {
  padding: 1rem 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<footer class="footer bg-dark ">
    <div class="container-fluid flex lead py-1">
       <div class="box flex-basis-3">
           <h1>About</h1>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis voluptatum vel praesentium molestias consectetur ea consequuntur a quidem vitae iste?</p>
       </div> 
       <div class="box flex-basis-3 text-center">
        <h1>CarolandHousing</h1>
        <p>Copyright &copy; 2021</p>
        </div>
        <div class="box flex-basis-3 text-right">
            <div class="display: flex; justify-content: flex-end">
               <span><a href="index.html">Home</a></span>
               <span><a href="features.html">Features</a></span>
               <span><a href="docs.html">Docs</a></span>
            </div>
            <div>
              <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
              <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
            </div>
        </div>
     </div>
</footer>