Problems with selectors CSS - html

Question

I am having some troubles in CSS. My .content-zona will not show up on the page, it has a lower selector than the nav (for some reason that i can't figure out) and the nav will just overwrite whatever the .content-zona has in CSS. Im very new to this, I hope my question wasn't very confusing. Thank you whoever tried to help a newbie!
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.site-nav li li a:hover
/* Kraj Padajuceg menija */
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>

Answer 1

Nothing is overwritten on your selector, you have a dangling selector before .content-zona and CSS can't recover himself after that error until it reaches a close curly bracket so all .content-zona styles are ruined
Remove these two lines from your CSS code or add curly brackets to end of that selector to fix it
Either Like This
.site-nav li li a:hover{}
Or
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>