bootstrap - jak ulorzyc social divs?

pytanie zadane 4 lipca 2020 w HTML i CSS przez niezalogowany

cześć mam pytanie moje social divs nie ukladaja sie tak jak powinny - mianowicie nie ukladaja sie wraz z zmniejszeniem strony tak jak na zdjeciu a jak zjade do najmniejszego okna wchodza na footer

 <div class="socials"> 
 <div class="row"> 
     <div class="socialdivs">

  	
	<div clsss="col-8">
       <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>
	   
	   <div clsss="col-5">
       <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>
	   
	   <div clsss="col-8">
       <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>	   
	   
	   
	   <div clsss="col-5">
       <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>
	   
	   <div clsss="col-8">
		<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>
		
       
     
 </div>        
	</div>	 
		 </div>

co robie zle jak to ustawić? i jeszcze mam problem z paddingiem nie dziala jak dodaje p-2 albo inny czy da sie to zrobic zeby przy malym oknie byl padding?

1 odpowiedź

odpowiedź 4 lipca 2020 przez pablop76 VIP (123,180 p.)

To nie jest zgodne z dokumentacją

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.

komentarz 4 lipca 2020 przez niezalogowany

o sorry juz poprawione - zmienialem bo gdzieś znalazlem ze jak bedzie ponad 12 to kolumny beda przeskakiwaly jeden na drugi

komentarz 4 lipca 2020 przez pablop76 VIP (123,180 p.)

To się zgadza, ale czy taki był zamysł?

nie ukladaja sie wraz z zmniejszeniem strony tak jak na zdjeciu

Na jakim zdjęciu?

komentarz 4 lipca 2020 przez niezalogowany

@pablop76,

komentarz 4 lipca 2020 przez niezalogowany

chce zeby albo zmniejszyly sie w jednej linii albo zeby wchodzily na siebie jedno nad drugie

tylko teraz jak zmniejszam to robi mi sie tak

komentarz 4 lipca 2020 przez pablop76 VIP (123,180 p.)

<a href=""> <i> </a></i>

Źle

<a href=""> <i> </i></a>

Dobrze.

Element <a></a> jest opakowaniem dla <i></i>.

<div class="row"> 
    <div class="socialdivs">    
        <div clsss="col-8"></div>
        <div clsss="col-4"></div>
    </div>
</div>

Źle, ponieważ socialdivs nie może znajdować się pomiędzy rzędem i kolumnami.

<div class="row socialdivs"> 
        <div clsss="col-8"></div>
        <div clsss="col-4"></div>
</div>

Dobrze

Poza tym nic więcej nie da się powiedzieć, błąd może być w innym miejscu kodu, którego nie pokazałeś

komentarz 4 lipca 2020 przez niezalogowany

Tak Wygląda na dana chwile cały HTML i CSS - co coś zmienię to roz^ierdziela mi wszystko :/ nawet głupi padding i margin nie działa jak wpisuje m albo p i wartość - i mam za dużo opcji które są niepotrzebne bo nic nie wnoszą ale boje się że jak zacznę zmienić to rozwali mi całą stronę do końca i nie będzie ani w jedną ani w drugą :(

<!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 stad... </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="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">
 <header>
        <div class="header">
 
 <div clsss="col-sm-2">
    <div class="logo"><image src="zdjecia/Logo1.png" style="float:left"> Na Południe stąd...</div>
</div>
     <div clsss="col-sm-2">
   <div class="motto"><i> "Nie ważne skąd przybyłeś - </br> ważne dokąd zmierzasz"</i></div>
 </div> 
  

<div class="st">
  <nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	
	 <ul class="navbar-nav mr-auto">
	 <li class="nav-item active">
	
    <a href="index.php" title="Home"> <i class="icon-home"> </a></i></li> 
  
  <li class="nav-item active">
		<a href="film.php" title="Film" >Film</a></li>
		
   <li class="nav-item active">
		<a href="historia.php" title="Historia" >Historia</a></li>
			
	<li class="nav-item active">
		<a href="kuchnia.php" title="Kuchnia" >Kuchnia</a></li>
	
	<li class="nav-item active">
		<a href="muzyka.php" title="Muzyka" >Muzyka</a></li>
		
	<li class="nav-item active">
		<a href="poradniki.php" title="Poradniki" >Poradniki </a></li>
		
	<li class="nav-item active">
    <a href="omnie.php" title="O mnie">O mnie </a></li>
   
    <li class="nav-item active">
   <a href="englishversion.php" title="English version"> <i class="icon-language"> </a></i></li> 
   </div>
   
   
   </ul>
</div>   
    
</div>

</header>

<main>
<div class="row">
   <div class="content">
   <div clsss="col-sm-4 p-4"></p>
 <?php echo ' <h2><center> Witaj na mojej stronie! </center></h2></br>
<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>
<div clsss=" col-sm-2 p-4">
<div class="Parallax2" class="img-fluid" title="Moje zdjęcie na tle Akropolu ateńskiego">
</div> 
</div>
</br>
<?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 clsss="col-sm-2 p-4">
<div class="Parallax2"  title="Moje zdjęcie na tle Akropolu ateńskiego">
 

</div>
</div>
</div> 

</div>

</br>
   </div>
  
  
</main>

<aside class="col-lg">
 <div class="socials"> 
 <div class="row socialdivs"> 
     

  	
	<div clsss="col-sm-6">
       <div class="FB"> <a href="https://www.facebook.com/" target="_blank" title="Zapraszam na mojego Facebooka"><i class="icon-facebook-rect"> </i></a>
		</div></div>
	   
	   <div clsss="col-sm-6">
       <div class="YT"><a href="https://www.youtube.com/" target="_blank" title="Zapraszam na mój kanał Youtube"> <i class="icon-youtube"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
       <div class="G"> <a href="https://accounts.google.com" target="_blank" title="Zapraszam na mój Gmail"><i class="icon-gmail"></i></a>
		</div></div>	   
	   
	   
	   <div clsss="col-sm-6">
       <div class="Linked"><a  href="https://www.linkedin.com/" target="_blank" title="Zapraszam na mój profil na Linkedin"> <i class="icon-linkedin"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
		<div class="instagram"><a href="https://www.instagram.com/" target="_blank" title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></i></a>
		</div></div>
		
       
     
 </div>        
	</div>	 
		 </div>
		 
	 <div class="row">
			
  <div class="footer">copyright: napoludniestad.pl 2020&copy Strona ta powstł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>
  </aside>	
 
 <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: 45px 0 20px;

}


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

font-size:80px;
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%;
	float:left;
	position: fixed;
	left:110px;
	top:-10px;
	z-index:2;
	

	
}
	

.nav-item
{
	top:0;
	width:126.3px;
	background-color:#e2e2e2;
	padding:10px 0;
	text-align:center;
	font-size:20px;
	height:50px;
	display:inline-block;
	border-style:none;


}




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



.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: 0px;
	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;
	
}

.Parallax2 img
{
	width:100%;
	height: auto;
	
}

.Parallax img
{
	width:100%;
	height: auto;
}

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

}

.socialdivs
{
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	height: 80px;
	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;
	height: 80px;
	
}

.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;
	height: 80px;
	
}

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

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

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





.footer
{
	width: 78%;
	background-color: #e2e2e2;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	
	
	padding: 10px;
	
	
}

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: none;
}
	
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;
	
	
}

pokażesz mi błędy gdzie robie? może nie używam jakiejś definiowanej klasy?

komentarz 4 lipca 2020 przez niezalogowany

dobra poprawka udało mi się ogarnąć social div :D ale nadal nie ogarniam czemu mi padding i nav bar nie działa jak powinien teraz wygląda to tak

<!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 stad... </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="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">
 <header>
        <div class="header">
 
 <div clsss="col-sm-2">
    <div class="logo"><image src="zdjecia/Logo1.png" style="float:left"> Na Południe stąd...</div>
</div>
     <div clsss="col-sm-2">
   <div class="motto"><i> "Nie ważne skąd przybyłeś - </br> ważne dokąd zmierzasz"</i></div>
 </div> 
  
 

<div class="st">
  <nav class="navbar navbar-expand-md">
  
   
  
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
  
 
	
	 <ul class="navbar-nav mr-auto">
	 <li class="nav-item active">
	
	 
	
    <a href="index.php" title="Home"> <i class="icon-home"> </a></i></li> 
  
  <li class="nav-item active">
		<a href="film.php" title="Film" >Film</a></li>
		
   <li class="nav-item active">
		<a href="historia.php" title="Historia" >Historia</a></li>
			
	<li class="nav-item active">
		<a href="kuchnia.php" title="Kuchnia" >Kuchnia</a></li>
	
	<li class="nav-item active">
		<a href="muzyka.php" title="Muzyka" >Muzyka</a></li>
		
	<li class="nav-item active">
		<a href="poradniki.php" title="Poradniki" >Poradniki </a></li>
		
	<li class="nav-item active">
    <a href="omnie.php" title="O mnie">O mnie </a></li>
   
    <li class="nav-item active">
   <a href="englishversion.php" title="English version"> <i class="icon-language"> </a></i></li> 
   </div>
   
   
   </ul>
</div>   
    
</div>

</header>

<main>
<div class="row">
   <div class="content">
   <div clsss="col-sm-4 p-4"></p>
 <?php echo ' <h2><center> Witaj na mojej stronie! </center></h2></br>
<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>
<div clsss=" col-sm-2 p-4">
<div class="Parallax2" class="img-fluid" title="Moje zdjęcie na tle Akropolu ateńskiego">
</div> 
</div>
</br>
<?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 clsss="col-sm-2 p-4">
<div class="Parallax2"  title="Moje zdjęcie na tle Akropolu ateńskiego">
 

</div>
</div>
</div> 

</div>

</br>
   </div>
  
  
</main>

<aside class="col-lg">
 
 <div class="row socialdivs"> 
     

  	
	<div clsss="col-sm-6">
       <div class="FB"> <a href="https://www.facebook.com/" target="_blank" title="Zapraszam na mojego Facebooka"><i class="icon-facebook-rect"> </i></a>
		</div></div>
	   
	   <div clsss="col-sm-6">
       <div class="YT"><a href="https://www.youtube.com/" target="_blank" title="Zapraszam na mój kanał Youtube"> <i class="icon-youtube"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
       <div class="G"> <a href="https://accounts.google.com" target="_blank" title="Zapraszam na mój Gmail"><i class="icon-gmail"></i></a>
		</div></div>	   
	   
	   
	   <div clsss="col-sm-6">
       <div class="Linked"><a  href="https://www.linkedin.com/" target="_blank" title="Zapraszam na mój profil na Linkedin"> <i class="icon-linkedin"> </i></a>
	   </div></div>
	   
	   <div clsss="col-sm-6">
		<div class="instagram"><a href="https://www.instagram.com/" target="_blank" title="Zapraszam na mój profil na Instagramie"><i class="icon-instagram-filled"></i></a>
		</div></div>
		
       
     
 </div>        
		 
		 </div>
		 
	 <div class="row">
			
  <div class="footer">copyright: napoludniestad.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>
  </aside>	
 
 <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: 45px 0 20px;

}


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

font-size:80px;
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%;
	float:left;
	position: fixed;
	display:inline-block;
	top:-10px;
	z-index:2;
	left:92px;
	
}
	

.nav-item
{
	top:0;
	width:126.3px;
	background-color:#e2e2e2;
	padding:10px 0;
	text-align:center;
	font-size:20px;
	height:50px;
	display:inline-block;
	border-style:none;
	


}




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



.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: 0px;
	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;
	
}

.Parallax2 img
{
	width:100%;
	height: auto;
	
}

.Parallax img
{
	width:100%;
	height: auto;
}

.socials
{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align: justify;
	height: auto;


}

.row socialdivs
{
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
	height: 100px;
	

}

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

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

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

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

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

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


.footer
{
	width: 78%;
	background-color: #e2e2e2;
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	padding: 10px;
	
}

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: none;
}
	
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;
	
	
}

jak wstawiałem navbar toggler w kilku miejscach to mimo to nic sie nie pokazalo a staram się robić to tak jak na filmiku Kurs Bootstrap (#2) Belka nawigacyjna (navbar) - ale coś mi nie idzie, po za tym belka navbara wyłazi mi poza białą krawędź i zachowuje się jak social divy wczesniej na jednym z wysłanych zdjęć, dalej też padding i margin nie działa co jest dla mnie tajemnicą zupełną