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 © 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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…