blog w html/css, responsywność podczas minimalizowania okna wyszukiwarki

Wreszcie zabrałam się za częściowo samodzielne myślenie (czasami musiałam wracać do poradników) i stworzyć coś na kształt strony głównej bloga. Mam jednak pytanie co do struktury, czy znaczniki i divy są dobrze zakodowane? Po zrobieniu całości wydawało mi się, że wszystko jest okej, natomiast jak zminimalizowałam stronę i zaczęłam zmieniać jej rozmiar, cała strona nie układa się już tak ładnie jak w odcinku dot. tworzenia bloga od Pana Mirosława. Całość jakby zlewa się ze sobą...Na co powinnam zwrócić uwagę? Co jest nie tak?

PS Proszę nie zwracajcie uwagi na zły wygląd strony i kompletne niepasujące treści, chciałam po prostu "pobawić się" wszystkim i podłapać ogólne podstawy.

Za dodatkowe rady niezwiązane z pytaniem, również będę wdzięczna.

<!DOCTYPE>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>Figure skating</title>
	<meta name="description" content="Łyżwiarstwo z dnia na dzień zyskuje popularność. Soliści, solistki, pary taneczne lub sportowe to tylko część z całości, które znajdziesz na blogu">
	<meta name="keywords" content="łyżwiarstwo, skoki, piruety, łyżwy, lodowisko, soliści, solistki, pary taneczne, pary sportowe">
	<meta name="author" content="Monika King">
	
	<link rel="stylesheet" href="main.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap&subset=latin-ext" rel="stylesheet"> 
	<link rel="stylesheet" href="socials/css/fontello.css" type="text/css">
	
	<!--[if lt IE 9]>
	<script> src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"</script>
	<!--[endif]-->

</head>

<body>

	<header>
	
		<div class="logo">
		
			<img src="img/dna.png" alt="tlo">
			<div class="logoh1">
				<h1>Figure skating </h1>
			</div>
			
		</div>
	
		<nav id="topnav">
			
			<ul class="menu">
				<li><a href="#">Strona główna</a></li>
				<li><a href="#">Elementy</a>
					<ul class="undermenu">
						<li><a href="#">Skoki</a></li>
						<li><a href="#">Piruety</a></li>
						<li><a href="#">Sekwencja kroków</a></li>
						<li><a href="#">Sekwencja choreograficzna</a></li>
					</ul>
				</li>
				<li><a href="#">Dyscypliny</a>
					<ul class="undermenu">
						<li><a href="#">Soliści</a></li>
						<li><a href="#">Solistki</a></li>
						<li><a href="#">Pary taneczne</a></li>
						<li><a href="#">Pary sportowe</a></li>
					</ul>
				</li>
				<li><a href="#">O autorze</a></li>
				<div style="clear:both;"></div>
			</ul>
		</nav>

	</header>
	
	<div class="container">
		
		<div class="leftside">
		
			<main>
		
				<article class="article1">
					<header>
						<h2>Cel witryny</h2>
						<p class="cel">Celem witryny jest popularyzacja łyżwiarstwia figurowego</p>
					</header>
					
					<img src="img/naruto.png" alt="naruto"></img>
					
					<p class="nexttonaruto">Viz Media licensed the manga and anime for North American production and serialized Naruto in their digital Weekly Shonen Jump magazine. The anime series began airing in the United States and Canada in 2005, and in the United Kingdom and Australia in 2006 and 2007, respectively. The films and most OVAs from the series were also released by Viz, with the first film premiering in movie theaters. Viz Media began streaming the two anime series on their streaming service Neon Alley in December 2012. The story of Naruto continues with Naruto's son, Boruto Uzumaki, in Boruto: Naruto Next Generations: Boruto wishes to create his own ninja way instead of following his father's.
					Naruto is the fourth best-selling manga series in history, selling 235 million copies worldwide in 35 countries. It has become one of Viz Media's best-selling manga series; their English translations of the volumes have appeared on USA Today and The New York Times bestseller list several times, and the seventh volume won a Quill Award in 2006. Reviewers praised the manga's character development, strong storylines, and well-executed fight scenes, though some felt the fight scenes slowed the story down. Critics noted that the manga, which has a coming-of-age theme, makes use of cultural references from Japanese mythology and Confucianism. ny szary</p>
					<div style="clear:both;"></div>
				</article>
			
				<article class="article2">
					<header>
						<h2>Najnowsze wpisy</h2>
					</header>
					
					<section>
						
						<img src="img/wpispierwszy.png" alt="wpis"></img>
						<div class="content"> 
							<h4>New episode naruto</h4>
							<p>He founded Konohagakure alongside his rival, Hashirama Senju, with the intention of beginning an era of peace. When the two couldn't agree on how to achieve that peace, they fought for control of the village, a conflict which ended in Madara's death. </p>
						</div>
						<div style="clear:both;"></div>
					
					</section>
		
					<section>
					
						<img src="img/wpisdrugi.png" alt="wpis"></img>
						<div class="content">
							<h4>How look madara after this situation?</h4>
							<p>Madara, however, rewrote his death and went into hiding to work on his own plans. Unable to complete it in his natural life, he entrusted his knowledge and plans to Obito Uchiha shortly before his actual death.</p>
						</div>
						<div style="clear:both;"></div>
					
					</section>
					
					<section>
						<img src="img/wpistrzeci.png" alt="wpis"></img>
						<div class="content">
							<h4>Unexpected situation just hapennd</h4>
							<p>Madara was born during the Warring States Period, and was the eldest of Tajima Uchiha's five sons. Madara and his brothers grew up on the battlefield waging constant war with the Uchiha's rivals: the Senju.</p>
						</div>
						<div style="clear:both;"></div>
					
					</section>
		
				</article>
		
			</main>
	
	
		</div>	
	
	<div class="rightside">
	
		<aside>
				
				<div class="przyklady">
					<h5>Przykładowi łyżwiarze</h5>
					<ul>
						<li>Evgenia Medvedeva</li>
						<li>Yuzuru Hanyu</li>
						<li>Shoma Uno</li>
					</ul>
				</div>
				
				<div class="powiazanewpisy">
					<h5>Powiązane wpisy</h5>
					<ul>
						<li>Nowości na lodowisku</li>
						<li>Edea</li>
						<li>Jackson</li>
					</ul>
				</div>
				
				<div class="reklama">
					<img src="img/ad.jpg" alt="reklama"></img>
				</div>
		
		</aside>
	
		</div>
	
		<div style="clear:both";></div>
	</div>

	<footer>
		
		<div class="socials">
			<a href="#"><div class="yt">
				<i class="icon-youtube"></i>
			</div></a>
			<a href="#"><div class="fb">
				<i class="icon-facebook-1"></i>
			</div></a>
			<a href="#"><div class="gplus">
				<i class="icon-gplus"></i>
			</div></a>
			<a href="#"><div class="twitter">
				<i class="icon-twitter"></i>
			</div></a>
			<div style="clear:both;"></div>
		</div>
		
		<div class="ending">
		
			Wszelkie prawa zastrzeżone &copy; 2019 Dziękuję
		
		</div>
	
	</footer>

</body>
</html>

body
{
	/* Background pattern from Toptal Subtle Patterns */
	background-image: url("img/hotel-wallpaper-black.png");
	color: #ffffff;
	margin: 0; !important;
	font-family: 'Open Sans', sans-serif;
	font-size: 25px;	
}

header
{
	width: 100%;
	margin: 0;
}

.logo
{
	height: 150px;
	position: relative;
	width: 100%;
}

.logo img
{
	height: 100%;
	width: 100%;
}

.logoh1
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background:  rgba(0, 0, 0, 0.5);
	letter-spacing: 5px;
	padding: 0 20px 0 20px;
	border-radius: 5px;
}

h1
{
	text-align: center;
	margin: 0;
	padding: 0 10px 1px 10px;
	text-transform: uppercase;
	text-shadow:
	5px 5px 0 #103aa1;
}

#topnav
{
	width: 100%;
	padding: 10px 0;
	background-color: #426dd4;
	text-align: center;
	border-top: 3px solid #315cc3;
	border-bottom: 3px solid #315cc3;
}

.menu /*które znajduje się w topnav czyli lista ul*/
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 20px;
	height: 30px;
	display: inline-block; /*mówi aby elementy zachowywały się jak blok, wóczas te elemnty przyjmują text align center z nav*/
}

.menu a
{
	text-decoration: none;
	color: #fff;
	display: block; 
	width: 150px;
	
	/*zachowuj się jak block, aby nadać szerokość, wyskość, w tym wypadku nadałam taką samą jak li*/	
}

.menu > li:hover /*dajemy li dlatego że kolor zmienia się jak najedziemy na li, niekoniecznie na hipełącze, hiperłącze to tak po drodze, dlatego ważne żeby też to hiperłącze miało odpowiednią wyskośc itd.*/
{
	background-color: #204bb2;
}

.menu > li:hover > a
{
	color: black;
}

.menu > li
{
	float: left;
	width: 150px;
	height: 30px;
	border-right: 3px dashed #315cc3;
}

.menu > li:first-child
{
	border-left: 3px dashed #315cc3;
}

.undermenu
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: none; /*schowaj liste*/
}

.menu > li:hover > .undermenu
{
	display: block;
}

.undermenu > li
{
	background-color: #537ee5;
	position: relative;
	z-index: 100;
	border-top: 3px dashed #426dd4;
}

.undermenu > li:hover
{
	background-color: black;
}

.undermenu > li:hover > a
{
	color: #426dd4;
}

.undermenu > li > a:
{
	text-align: justify;
}

.container
{
	margin-left: 100px;
	margin-right: 100px;
}

.leftside
{
	float:left;
	width: 85%;
}

.article1
{
	background-color: black;
	padding: 20px;
}

.article1 img
{
	float:left;
	margin: 20px 40px 20px 40px;
}

.article2
{
	background-color: black;
	border-top: 2px solid gray;
}

.rightside
{
	float:left;
	width: 15%;
}

ul
{
	margin: 0;
	padding: 10px;
}

.przyklady
{
	background-color: black;
	padding-left: 20px;
	padding-top: 50px;
	padding-bottom: 20px;
	margin-left: 20px;
}

.powiazanewpisy
{
	background-color: black;
	padding-left: 20px;
	border-top: 2px solid gray;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 20px;
}

.reklama
{
	margin-left: 20px;
}

h5
{
	margin: 0;
	padding: 0;
}

h2
{
	margin: 0;
	text-align: center;
	padding-top: 10px;
	
}

.cel
{
	margin: 0;
	text-align: center;
	padding-bottom: 10px;
	font-weight: 600;
	
}

.nexttonaruto
{
	text-align: justify;
}

p
{
	margin: 0;
}

section
{
	padding: 20px;
}

section img
{
	float:left;
	padding-right: 15px;
	border-radius: 50px;
}

.content > p
{
	font-size: 15px;
	margin: 0;
}

footer
{
	background-color: black;
	text-align: center;
	border-top: 2px solid gray;
}

.socials
{
	display: inline-block;
}

.socials a
{
	text-decoration: none;
	color: white;
}

.fb
{
	float:left;
	width: 250px;
	height: 155px;
}

.fb:hover
{
	background-color: #3b5998;
}

.yt
{
	float:left;
	width: 250px;
	height: 155px;
}

.yt:hover
{
	background-color: #ff0000;
}

.gplus
{
	float:left;
	width: 250px;
	height: 155px;
}

.gplus:hover
{
	background-color: CC3333;
}

.twitter
{
	float:left;
	width: 250px;
	height: 155px;
}

.twitter:hover
{
	background-color: #00acee;
}

.ending
{
	text-align: center;
	font-size: 18px;
	padding: 2px 0 2px 0;
	background-color: gray;
}