I am having difficulty positioning an image below the navbar without it overlapping with the text in the navbar.
No matter what I try in my code, the image remains attached to the bottom of the navbar and won't move to a separate row below it.
I have experimented with putting the image in different containers like div, section, p, ul, li, but nothing seems to work.
Is there a way to adjust the image placement without resorting to using break tags?
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md fixed-top">
<a href="#" class="navbar-brand">TEXT</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="toggle navigation">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a href="" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Projects</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<br>
<br>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<img class="img-thumbnail rounded-circle" src="/Users/admin/Pictures/img.jpg" alt="img">
</div>