I am facing an issue where the header in the first section remains fixed as an attachment, but when I resize the browser window, the background only covers a small portion of the section. The rest of the content either goes under another section or completely out of the background. As you can see, opening this page in full screen resolves the problem and the sections look correct. However, reducing the window causes the sections to fall apart and overlap each other. Could this be due to a lack of clearfixes or is it a positioning issue with each section?
https://codepen.io/tubaris/pen/YQQewB/
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Omnifood">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnifood</title>
<link rel="stylesheet" type="text/css" href="vendors/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="https://image.ibb.co/bY2jyQ/logo_white.png" alt="Omnifood logo" class="logo">
<ul class="main-nav">
<li><a href="#">Food delivery</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Our cities</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
<div class="header-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a href="#" class="btn btn-coloured">I’m hungry</a>
<a href="#" class="btn btn-bordered">Show me more</a>
</div>
</header>
<section class="section-features">
<div class="row">
<h2>Get food fast – not fast food.</h2>
<p class="text-about">Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
</div>
<div class="row">
<div class="feature-col">
<i class="ion-clock icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="feature-col">
<i class="ion-jet icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="feature-col">
<i class="ion-ios-nutrition icon-big"></i>
<h3>100% Organic</h3>
<p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="feature-col">
<i class="ion-card icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
</div>
</div>
</section>
<section class="section-meals">
<div class="row">
<h2>Omnifood meals showcase</h2>
<p class="text-about">Selected Omnifood meals offered by our company</p>
</div>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/eTtwCk/1.jpg" alt="egg with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/iFpgdQ/2.jpg" alt="california rolls sushi">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/igwGCk/3.jpg" alt="asparagus with carrots and meat">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/h74sk5/4.jpg" alt="carrot soup with nuts">
</figure>
</li>
</ul>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/j4MuyQ/5.jpg" alt="steak with green beans">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://image.ibb.co/m8twCk/6.jpg" alt="roll with egg, rucola and radish">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/bBjEyQ/7.jpg" alt="healthy burger">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="https://preview.ibb.co/fNWisk/8.jpg" alt="oatmeal with strawberries and cherries">
</figure>
</li>
</ul>
</section>
<section class="section-steps">
<div class="row">
<h2>How it works – Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="steps-col1">
<img src="https://image.ibb.co/hHoeXk/app_i_Phone.png" alt="Omnifood app on iPhone" class="app-screen">
</div>
<div class="steps-col2">
<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app"><img src="https://image.ibb.co/gyPxJQ/download_app.png" alt="app store button"></a>
<a href="#" class="btn-app"><img src="https://image.ibb.co/jZWYsk/download_app_android.png" alt="play store button"></a>
</div>
</div>
</section>
</body>
`