Problem with sticky position and element overlapping another element - html

Question

I made a page using HTML and CSS only. Tried to make it responsive. I say, I managed that, but there are some issues. First is, my navigation is not sticky. I wanted it to stick to the top when I scroll, but it does not work. Second thing is, when I resize the screen for mobile device, div with class "kid desni" goes over div with class="kid levi". Why is that happening? Also, on bigger screen, div with class="kid levi" and div with class="kid desni" should be aligned next to each other, but div with class "desni" is a bit higher than it should be. And the img does not take full space of its parent div. Third thing is, do you know how to make that blue part "why adventure travel" look like that? And fourth, those small images bellow are cut on the bottom, if you can see, a little bit. How do I do that? I hope you understand what I am trying to achieve here. :) Here is part of HTML code that I want to fix:
<div class="container">
<header class="" >
<div style="height: 30px;">
<nav>
<div class=logo>
<img src="images/logoicon.png" alt="sunce">
<img src="images/logotext.png" alt="outdoors" id="logotext"></a>
</div>
<ul class="nav-ul">
<li>Destinations</li>
<li>Travel style</li>
<li>Trabel deals</li>
<li>Gear</li>
</ul>
<div class="forma">
<input type="search" placeholder="search" class="pretraga">
<i class="fa fa-search"></i>
</div>
</nav>
</div>
</header>
<main>
<h1 style="text-align: center; margin-top: 70px;">CONNECT TO THE WORLD</h1>
<div class="content">
<div class="kid levi">
<div>
<h3>Our worls deservs more you</h3>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit tempore
velit impedit praesentium corporis sunt iure eaque, laudantium mollitia dicta eos eum
assumenda inventore itaque qui harum repudiandae error repellat.
</div>
<div>
<h3>Whatever your style see it your way</h3>
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Quisquam nihil, maiores soluta eos modi dolor error. Accusamus saepe mollitia
eaque, possimus fuga libero voluptatum consectetur asperiores vitae porro voluptatibus velit?
</div>
</div>
<div class="kid desni"> <!-- this is the div with and img that needs to be aligned and overlaps div above on small screen -->
<div>
<img src="images/img-connect.jpg" alt="conn" id="conn"
style="max-width: 80%; max-height: auto; margin-top: 50px;" >
</div>
</div>
</div><br>
And here is CSS:
nav {
background-color: steelblue;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
position: sticky;
top: 0;
}
.nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333; */
}
.nav-ul li {
display: inline;
float: left;
}
.nav-ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-ul li:last-child {
float: right;
}
.nav-ul li a:hover:not(.active) {
background-color: #111;
}
#logotext {
margin-bottom: 10px;
margin-left: 10px;
}
main {
width: 95%;
margin: auto;
}
.content {
display: flex;
margin-bottom: 70px;
}
.levi {
display: flex;
flex-direction: column;
}
.kid {
display: flex;
width: 100%;
height: 200px;
align-items: center;
margin: 0;
}
And this is for smaller screen:
#media screen and (max-width: 768px) {
nav {
display: block;
text-align: center;
}
.nav-ul,
.nav-ul li {
float: none;
}
.nav-ul li:last-child {
float: none;
}
.container {
width: 100%;
}
.content {
/* display: block; */
flex-direction: column;
}
.kid {
/* display: block; */
}
.levi {
/* display: block; */
}
.desni {
display: none;
}
This is how it's suppose to look:
This is how I made it. Big and small screen are shown.