I have utilized bootstrap classes and div elements to arrange the two divs in the layout shown in the image. The upper div, containing icons, does not extend all the way to the edge of the screen like the lower div. What could I be doing wrong? Additionally, it is crucial for me to maintain the alignment of the icons in the center of the div. Here is my CSS and HTML code:
CSS:
.icons_div
{
margin: 0px auto;
width: max-content;
}
.icon
{
margin: 0px auto;
width: 15px;
display: initial;
}
.fa
{
padding: 0px 10px;
}
HTML:
<div class="container-fluid">
<div class="icons_div">
<div class="row bg-secondary">
<div class="col-sm-2">
<div class="icon">
<i class="fa fa-circle"> </i>
</div>
</div>
<div class="col-sm-2">
<div class="icon"> <i class="fa fa-circle"> </i></div>
</div>
<div class="col-sm-2">
<div class="icon"><i class="fa fa-globe"> </i> </div>
</div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-search"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-home"> </i> </div> </div>
<div class="col-sm-2"> <div class="icon"><i class="fa fa-trash"> </i> </div> </div>
</div>
</div>
<div class="row">
<div class="col bg-dark" style="height: 40px;"></div>
</div>
</div> <br> <br>
P.S I have already imported all the necessary Bootstrap 4 libraries, so that should not be the issue