rozpadający się navbar w bootstrapie

Mam problem z bootstrapem - po podpięciu do strony rozwala mi nav bar i stopka, czy zmieni się to po dokładniejszym podpięciu? czy może coś zmienić? bawić się w responsywną siatkę jeśli to ma być blog i jest to pierwsza strona? ma być jako zachęta dla pracodawcy ale nie wiem czy zwracają na to przy rekrutacji?

HTML

<!DOCTYPE HTML>
<html lang="PL"> 

<head>   
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Na poludnie... </title>
<meta name="description" content="Strona poswiecona kulturze Europy w szczegolności Bałkanom, oraz jako strona mająca mi pomóc znaleźć pracę"/> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="mojecss.css" type="text/css"/>
<link rel="stylesheet" href="fontello-cd612d41/css/fontello.css" type="text/css"/>




</head> 
<body> 

 <div class="wraper"> 
 <div class="container-fluid">
  <div class="header">
 
 <div class="row">
    <div class="logo"><image src="zdjecia/Logo1.png" style="float:left"> Na Południe...</div>
   
   <div class="motto"><i> "Nie ważne skąd przybyłeś - </br> ważne dokąd zmierzasz"</i></div>
  
<div class="st">
  <div class="nav"> 
	
   <div class="Home"> <a href="index.php" title="Home"> <i class="icon-home"> </a></i></div>
  
   <ul> 
   
	<li><a href="film.php" title="Film" >Film</a></li>
	<li><a href="historia.php" title="Historia" >Historia</a></li>
	<li><a href="kuchnia.php" title="Kuchnia" >Kuchnia</a></li>
	<li><a href="muzyka.php" title="Muzyka" >Muzyka</a></li>
	<li><a href="poradniki.php" title="Poradniki" >Poradniki </a></li>
    <li><a href="omnie.php" title="O mnie">O mnie </a></li>
   
   <div class="translate"> <a href="englishversion.php" title="English version"> <i class="icon-language"> </a></i></div>
   </div>
   </ul>
</div>   
    


   <div class="content">
   
 <?php echo ' <h2><center> Witaj na mojej stronie! </center></h2>
<p style="text-indent: 7%;">Drogi gościu, niezwykle miło mi cię widzieć na mojej stronie! Jest to moja pierwsza strona internetowa w moim życiu - nie badź więc zbyt surowy dla jej wygladu, lub jej braków - poprostu dałem z siebie wszystko co mogłem, aby była jak najlepsza, jeżeli posiadasz jakies uwagi proszę kieruj je bezpośrednio na mojego maila lub na moje social media! Ta strona będzie sukcesywnie rozbudowywana o kolejne materiały, więc wpadaj co jakiś czas, aby sprawdzić co nowego! Strona ta została stworzona przeze mnie z dwóch powodów - po pierwsze mojej niezwykłej miłości do Bałkanów i podróży, oraz z chęci znalezienia nowej pracy, a czy może być lepsza reklama, niż pokazanie swoich umiejętności? Tak więc, ciesz się tą stroną i niech umila ci czas!  </br></br></P>';?>


<div class="Parallax2" title="Moje zdjęcie na tle Akropolu ateńskiego">
</div> 
<?php echo '<p style="text-indent: 7%;">
Moją stronę podzieliłem na kilka działów takich jak: film, historia, kuchnia, muzyka, poradniki oraz o mnie. W działach tych będę się starał skupić na kulturze Bałkańskiej i nie tylko :) uzupełnieniem mojej tworczości będa filmy, zdjęcia oraz artykuły omawiające Bałkany z mojej perspektywy, natomiast w zakładce "o mnie" będą informacje o mojej osobie jak również dane do kontaktu. </br>
Serdecznie was do tego zapraszam!</p>';?>


<?php echo '<p style="text-indent: 7%;">Jeśli masz jakiś pomysł na stronę, chciałbyś mnie zatrudnić, podjąć jakąś wspołpracę ze mną lub po prostu umowić się na piwo to również zapraszam cię do kontaku! </p>';?>


</br>
 
<div class="Parallax2"  title="Moje zdjęcie na tle Akropolu ateńskiego">
 

</div>
</div> 



</br>
   </div>
  
  
  
 <div class="socials"> 
     <div class="socialdivs">
			
       <div class="FB"> <a href="https://www.facebook.com/" <i class="icon-facebook-rect"target="_blank" title="Zapraszam na mojego Facebooka"> </a></i></div>
       <div class="YT"><a href="https://www.youtube.com/" target="_blank" title="Zapraszam na mój kanał Youtube"> <i class="icon-youtube"> </a></i></div>
       <div class="G"> <a href="https://accounts.google.com" target="_blank" title="Zapraszam na mój Gmail"><i class="icon-gmail"></a></i></div>	
       <div class="Linked"><a  href="https://www.linkedin.com/" target="_blank"><i class="icon-linkedin"title="Zapraszam na mój profil na Linkedin"> </a></i></div>
       <div class="instagram"><a href="https://www.instagram.com/" target="_blank"title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></a></i></div>	   
       <div style="clear:both" ></div>
     </div>
         </div>
			
  <div class="footer">copyright: napoludnie.pl 2020&copy Strona ta powstała z mojej checi rozwoju w sferze IT oraz zamiłowania do podróży. </br>Twórcą tej strony jest Jan Pytlarczyk. Chcesz o mnie wiedzieć więcej? Sprawdź moje social media! </div>
  </div>
 </div>
 <script src="jquery-3.5.1.min.js"> </script>
 
<script>

	$(document).ready(function() {
	var NavY = $('.st').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('.st').addClass('sticky');
	} else {
		$('.st').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	


</div>



 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script src="js/bootstrap.min.js"></script>

</body>
</HTML>

CSS

body
{
background-image: url(zdjecia/backgrounimage.png);
background-attachment: fixed;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	
}

.wraper
{
width:80%;
background-color:white;
margin:auto;
margin-left:auto;
margin-right:auto;

}

.header
{
width:100%;
padding: 40px 0;

}


.logo
{
width: 88%;
border: solid;
border-width:2px;
border-color:white;
background:white;
margin-left:auto;
margin-right:auto;
padding: 5px;

font-size:90px;
font-family: 'Crimson Text', serif;
text-align: center; 
}

.motto
{
	width:70%;
	font-size:30px;
    font-family: 'DM Mono', monospace;
	margin-left:auto;
    margin-right:auto;
    text-align: center;
	
}


.st
{
	width:79%;
	position: fixed;
	left:133px;
	top:0;
	z-index:2;
}
	

.nav
{
	width:100%;
	background-color:#e2e2e2;
	padding:10px 0;
	text-align:center;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	height:30px;

}

.Home
{
	
	width:60px;
	height:30px;
	top:40px;
	float:left;
	margin-left:10px;
	
	text-align:center; 
	padding: 5px 0;
	font-size:24px;
	
}

.Home:hover
{
	background-color:white;
	transform: scale(1.1);
}

.translate
{
	position: relative;
    width:60px;
	height:30px;
	left:0px;
	top:0px;
	float:right;
	margin-right:10px;
	display:inline-block;
	text-align:center; 
	padding: 5px 0;
	font-size: 30px;
	
}

.translate:hover
{
	background-color:white;
	transform: scale(1.1);
}

.podstrona
{
	display:block;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding: 20px;
	font-size:21px;
}
	
.content
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding-top: 20px;
	font-size:21px;
}


.Parallax 
{
	background: url(zdjecia/Mainfoto.png) no-repeat center;
background-size: cover;
	background-attachment: fixed;
	height: 500px;
}


.Parallax2
{
	background: url(zdjecia/Mainfoto.png) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	height: 400px;
}

.socials
{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align: justify;
	height: 50px;
	border: solid;
border-width:0px;
border-color:none;
}

.socialdivs
{
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	height: 50px;
	border: solid;
border-width:0px;
border-color:none;
}

.FB
{
	width:200px;
	height: 30px;
	float:left;
	font-size: 30px;
	text-align: center; 
	padding: 15px 0;
	text-decoration: none;
    color: transparent;
}
.FB:hover
{
	background-color: #4267B2;
	
}

.YT
{
	width:200px;
	height: 30px;
	float:left;
	font-size: 30px;
	text-align: center; 
	padding: 15px 0;
	text-decoration: none;
    color: transparent;
}

.YT:hover
{
	background-color:#FF0000;
	
}

.G
{
	width:200px;
	height: 30px;
	float:left;
	font-size: 30px;
	text-align: center; 
	padding: 15px 0;
}
.G:hover
{
	background-color:#d44638;
}

.Linked
{
	width:200px;
	height: 30px;
	float:left;
	font-size: 30px;
	text-align:center; 
	padding: 15px 0;
	
}
.Linked:hover
{
	background-color:#2867b2;
}

.instagram
{
	width:200px;
	height: 30px;
	float:left;
	font-size: 30px;
	text-align:center; 
	padding: 15px 0;
	
	
	
}
.instagram:hover
{
	background-color:#fcaf45;
}





.footer
{
	width: 935px;
	background-color: #e2e2e2;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	float:left;
	border: solid;
	border-color: black;
	border-width: 1px;
	padding: 30px;
	
}

a:visited
{
   color: black;
}

a.nav
{
	width:900px;
	margin-left:auto;
margin-right:auto;
	position:fixed;
	
	left:0;
	right:0;
	z-index:100;
	
}

ul
{
	padding:0;
	margin:0;
	list-style-type: none;
	font-size:16px;
	height:35px;
	line-height:200%;
	
}
	
ul a
{
	color:red;
	text-decoration: none;
	display:block;
}

ul > li
{
	float:left;
	width:142px;
	height:30px;
	border-right:1px solid black;
	
	text-align: center;
	display:inline-block;
}

ul>li:first-child
{
	border-left: 1px solid black;
}
	
ul>li:hover
{
	background-color:white;
}

ul>li:hover>a
{
	background-color:white;
}

.content1
{
	
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding-top: 20px;
	padding-bottom:10px;
	
	
}

.art1
{
	
	width:800px;
	display:block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:50px;
	position:relative;
}

.contwart
{
	
	padding:10px;
	display:block;
	width:auto;
	margin-left: auto;
	margin-right: auto;
	background-color:white;

}
.art1 .contwart
{
	position:absolute;
	display: block;
	width: auto;
	bottom:0px;
	left:0px;
	top:auto;
	right:auto;
	padding:10px;
	opacity:0;
	transition: opacity 0.4s ease-in-out;
	text-decoration: none;
}

.art1:hover .contwart
{
opacity:0.8;	
}

.pager
{
	position: relative; left:50px;
	display:inline-table;
	width:900px;
	margin-left: auto; 
	margin-right: auto;
	text-align:center;
	text-decoration:none;
	list-style-type: none;
	
	
}

.previous
{
	possition:absolute 20px;
	 text-align: center;
	float:left;
	
	dispalay:block;
	font-size:20px;
	padding-left:0px;
	left:70px;
	height:auto;
	border: dashed 1px black;
	-webkit-transition: transform 0.3s ease-in-out;
	-ms-transition: transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}
.next
{
	 text-align: center;
	 
	float:right;
	dispalay:block;
	font-size:20px;
	padding-left:0px;
	height:auto;
	border: dashed 1px black;
	transition: transform 0.3s ease-in-out;
	-webkit-transition: transform 0.3s ease-in-out;
	-ms-transition: transform 0.3s ease-in-out;
}

.previous:hover
{
	background-color:#e2e2e2;
	transform: scale(1.3);
}

.next:hover
{
	background-color:#e2e2e2;
	transform: scale(1.3);
}

.naglowekart
{
	font-size:30px;
	padding-top: 0px;
	
}

.zawartoscart
{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	
	
	font-size:21px;
	
	
}

czy zmieni się to po dokładniejszym podpięciu?

Nie wiem co masz na myśli mówiąc o dokładniejszym podpięciu.

bawić się w responsywną siatkę jeśli to ma być blog

Responsywność to podstawa, szczególnie przy stronach takich jak blog gdzie większość odwiedzin jest generowana właśnie przez telefony.

ma być jako zachęta dla pracodawcy ale nie wiem czy zwracają na to przy rekrutacji?

Myślę, że to będzie jedna z pierwszych rzeczy które sprawdzą.

Dodatkowo jeszcze po szybkim przejrzeniu kodu:

1. Nie wiem czy zmieniło się formatowanie po tym jak wkleiłeś kod na stronę ale popraw wcięcia jak np tutaj

body
{
background-image: url(zdjecia/backgrounimage.png);
background-attachment: fixed;
 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
     
}

2. Nie używaj polskich nazw jak np mojecss.css

3. Nie rozumiem po co używasz PHP w środku HTML aby wyświetlić statyczny tekst jak np tutaj

<?php echo '<p style="text-indent: 7%;">Jeśli masz jakiś pomysł na stronę, chciałbyś mnie zatrudnić, podjąć jakąś wspołpracę ze mną lub po prostu umowić się na piwo to również zapraszam cię do kontaku! </p>';?>