Bootstrap zdjęcie nie wyświetla się poprawnie

Witam wszystkich.

Zdjęcie na stronie internetowej nie wyświetla się poprawnie. Dokładniej ujmując zrobiłem sobie katalog na górze strony gdzie po zminimalizowaniu wyświetla się hamburgerowe menu.

Jednak gdy chcę dodać jakieś zdjęcie poniżej by dopełnić stronę to zdjęcie wyświetla się w tym menu i minimalizuje się razem ze stroną, albo nie wyświetla się wcale.

Chciałem to pierwsze zdjęcie zrobić tak by się skalowało razem z górnym paskiem tak jak ma to miejsce tutaj

https://www.julianabicycles.com/en-US (to nie żadna reklama, tylko przykład, o co mi dokładnie chodzi)

Na tej stronie internetowej również są hiperłącza po prawej stronie które po zmniejszeniu rozdzielczości robią się w hamburgerowe menu i to u mnie działa poprawnie. Tylko że jakimś dziwnym sposobem gdy kombinuje przy kodzie to zawsze to zdjęcie które na tamtej stronie przedstawia kobietę na rowerze u mnie albo wskakuje do góry (czyli do menu) albo znika. U mnie próby powtórzenia takiej rzeczy zaczynają się od 40 linijki htmla i właśnie stamtąd zaczynają się problemy z kodem.

Ogólnie rzecz ujmując chciałbym żeby to zdjęcie skalowało się tak samo jak skaluje się menu może być odstęp 2rem od headera, ponieważ rozwijający się katalog obniża się (tylko w postaci hamburgerowego menu)

To tyle z mojej strony. Postarałem się opisać problem tak dobrze jak tylko potrafię. Teraz pora na kod.

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Nuno - Responsive Bootstrap Theme</title>
	<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="css/fixed.css">
	<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
	
<header>
	<div class="container">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
	  <a class="navbar-brand" href="#"><img src="img/plata.png"></a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse"
			  data-target="#navbarResponsive">
		  <span class="navbar-toggler-icon"></span>
	  </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
	<ul class="navbar-nav ml-auto">
	  <li class="nav-item">
</li>


<nav>
	 <ul>
		 <li><a href="https://pl.wikipedia.org/wiki/Mi%C4%99dzynarodowa_Stacja_Kosmiczna">Produkty</a></li>
		 <li><a href="#">Informacje</a></li>
		 <li><a href="#">Kontakt</a></li>
		 <li><a href="#">Zniżki</a></li>
	</ul>
</nav>

<div class="row">

<div class="col-sm-4">
<figure>
	<a href="#"<img src="img/zdj.png" class="img-fluid"></a>
</figure>
</div>

<!--- Script Source Files -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<!--- End of Script Source Files -->

</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&display=swap');
body{
  margin: 0;
  background: #222;
}
.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background: #55d6aa;
}
header::after{
  content: '';
  display: table;
  clear: both;
}

.logo{
  float: left;
  padding: 1rem;
}

nav{
  float: right;
}

nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li{
  display: inline-block;
  margin-left: 1rem;
  padding-top: 0.2rem;
  margin-left: 2.5rem;

  position: relative;
}
nav a{
color: #444;
text-decoration: none;
text-transform: uppercase; 
fonr-size: 20px;
}
nav a:hover{
  color: #000;
}
nav a::before{
  content:'';
  display: block;
  height: 0.5rem;
  width: 100%;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 600ms;
}
nav a:hover::before{
  width: 100%;
}


body::-webkit-scrollbar{
width: 1.5rem;  
}

body::-webkit-scrollbar-track{
  background: #696969;
}

body::-webkit-scrollbar-thumb{
background: linear-gradient(transparent,#FFA07A);
border-radius: 0.8rem  
}

body::-webkit-scrollbar-thumb:hover{
background: linear-gradient(transparent,#483D8B);
}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

Straciłem już jakąkolwiek nadzieję, że uda mi się rozwiązać problem samemu.

Komu uda się rozwiązać problem, albo chociaż dać najmniejszą wskazówkę od serca życzę 100 lat końskiego zdrowia i szczęścia aż do ostatniej sekundy. :)

Życzę cierpliwości, bo ja straciłem ją już dawno temu.