It appears that you are in the process of creating a fixed div at the top of your page, but it seems to be overlapping with other HTML elements. When fixing an element to the top, ensure there is enough space for the other elements to display properly. I noticed you are utilizing bootstrap4 as indicated by the pb-3 class you are using. Instead of trying to reinvent the wheel, consider leveraging bootstrap classes to achieve your desired layout.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="~/Images/abc.png" height="30" width="30" style="border: 0; float: left; "/>
</a>
<!-- Toggler/collapsible Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
To resolve this issue, adjust the padding of the body or margin of the containing div element where the rest of the content resides.
<main role="main" class="pb-3" style='margin-top: 80px'>
@RenderBody()
</main>
If you prefer not to use bootstrap and stick to your own code, make sure to set the appropriate margin for the main element you have created.