Navbar is overlapping my content. bootstrap 4 - html

Question

I started to edit my web and I added second logo in navbar. It looks okay on pc but when I try it on mobile, navbar is covering image.. I am using bootstrap 4 so I would like to know how that navbar is up the image and not in image... Thanks.
<nav id="menu" class="navbar fixed-top navbar-toggleable-sm bg-faded px-5 stin">
<button class="navbar-toggler navbar-toggler-right mr-3" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="row d-flex align-items-end">
<div class="col-1 col-md-2 mr-1 mr-sm-0">
<a class="navbar-brand" href="#"> <img src="img/logo_barva.svg" height="90" class="pb-1"></a>´
</div>
</div>
<div class="collapse navbar-collapse prava pr-3" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ">
<li class="nav-item active">
<a class="nav-link" href="#">DOMŮ<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="uklid.html">ÚKLIDOVÉ SLUŽBY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pece.html">DOMA PÉČE</a>
</li>
<!--<li class="nav-item dropdown">
SLUŽBY<span class="caret"></span>
<ul class="dropdown-menu col-xs-12" >
<li><a class="dropdown-item" href="uklid.html">Úklidové služby</a></li>
<li><a class="dropdown-item" href="pece.html">Domácí péče</a></li>
</ul>
</li>-->
<li class="nav-item">
<a class="nav-link" href="kariera.html">KARIÉRA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kontakt.html">KONTAKT</a>
</li>
</ul>
</div>
<div class="logo2">
<div class="col-5 col-md-2 mr-1 mr-sm-0">
<a class="navbar-brand pr-5" href="pece.html"> <img src="img/doma_pece.png" height="65" class="pb-1"></a>´
</div>
</div>

Answer 1

Well, I managed to do it.
If someone needed it:
#media screen and (max-width: 768px) {
body {
padding-top: 15.3rem;
padding-bottom: 0rem;
color: #5a5a5a;
}
}