Bootsrap Flex and Justify-Content not working - css

Question

I just create footer with 4 columns, and last column contain two rows of div. I want that last column to be left aligned so i use justify-content-start for the first row, and it works. But when i try it to second row, which is search bar with button, the justify-content-start doesn't work.
So I tried with flex-row, but it doesn't work either. Here is my web view right now.
I want that search bar and button are parallel with the visitor counter above. Any suggestions for me to fix this things up?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="col-lg-3 offset-lg-1">
<div class="row mb-4 justify-content-start">
<div class="card text-white visitor-card" style="width: 16rem;">
<div class="card-body">
<h5 class="card-title">Total Pengunjung :</h5>
<?php
$date = date("Y-m-d");
$pengunjunghariini = $this->db->query("SELECT * FROM visitor WHERE date='".$date."' GROUP BY ip")->num_rows(); // Hitung jumlah pengunjung
$dbpengunjung = $this->db->query("SELECT COUNT(hits) as hits FROM visitor")->row();
$totalpengunjung = isset($dbpengunjung->hits)?($dbpengunjung->hits):0; // hitung total pengunjung
$bataswaktu = time() - 300;
$pengunjungonline = $this->db->query("SELECT * FROM visitor WHERE online > '".$bataswaktu."'")->num_rows(); // hitung pengunjung online`
?>
<h5 class="card-title">
<?php echo $totalpengunjung ?>
</h5>
</div>
</div>
</div>
<div class="d-flex flex-row" style="border-color: white;">
<div>
<form class="d-flex" action="<?= base_url('Home/search'); ?>" method="post">
<input class="form-control me-2" type="search" placeholder="Cari artikel ..." aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>

Answer 1

The problem might be that your container of that search bar might already have 100% width of its parent, so that any horizontal alignment wont be possible, since it has no space to move to.
This is a very common issue, and to quickly find out what is going on, you can use some CSS debugging techniques, as weird as it sounds.
The best example of this layout debugging technique is to set a border to your div that you need to be aligned somehow (or on its children).
.container {
border: 1px solid lime
outline: 1px solid lime
}
Note: outline might be better in some cases, since it is not increasing width/height of your element
If your container is really as wide as its parent, try width: fit-content on it, so it shrinks and leaves some space to be aligned to. Hope this helps, and to the future as well :-)