Witam,
Mam problem, otóż kiedy ustawiam margines górny dla div'a content margines ten pojawia się nad headerem. Dokładniej margin-top: 50px; powstaje nad garfiką w headerze.
I stąd też moje pytanie, gdzie leży błąd w kodzie?
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Navigation V1</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="navigation">
<div id="logo">
<img src="img/logo_an_col_version_2_1.png">
</div>
<div id="adnotations">
<ul class="main-ul">
<li><a href="index.html">STRONA GŁÓWNA</a></li>
<li><a href="1.html">1</a></li>
<li><a href="#">2</a>
<ul class="dropdown">
<li><a href="21.html">2.1</a></li>
<li><a href="22.html">2.2</a></li>
<li><a href="23.html">2.3</a></li>
<li><a href="24.html">2.4</a></li>
<li><a href="25.html">2.5</a></li>
<li><a href="26.html">2.6</a></li>
</ul>
</li>
<li><a href="#">3</a>
<ul class="dropdown">
<li><a href="31.html">3.1</a></li>
<li><a href="32.html">3.2</a></li>
<li><a href="33.html">3.3</a></li>
</ul>
</li>
<li><a href="about.html">4</a></li>
</ul>
</div>
</div>
<div id="header-img">
<img src="img/header2.jpg" />
</div>
</div>
<div id="content">
Treść witryny
</div>
<div id="footer">
<div id="footer-content">Copyright © 2020 AngelsNetwork | Wszelkie prawa zastrzeżone</div>
</fiv>
</body>
</html>
/*-------------------------------------*/
/*góra lewa dół prawa*/
/*1em = 16px*/
/*-------------------------------------*/
body
{
background-color: #fff;
margin: 0 !important;
font-family: 'Roboto Condensed', sans-serif;
}
/*-------------------------------------*/
#header
{
width: 100%;
}
/*-------------------------------------*/
#navigation
{
background-color: #00000066;
z-index: 1000;
position: fixed;
left: 0;
top: 0;
height: 90px;
width: 100%;
}
/*-------------------------------------*/
#logo
{
float: left;
padding: 13px 0 13px 75px; /*góra prawa dół lewa*/
}
#logo img
{
max-height: 64px;
}
/*-------------------------------------*/
#adnotations
{
float: left;
}
/*-------------------------------------*/
ul.main-ul
{
margin: 0;
padding: 30px;
list-style-type: none;
font-weight: 700;
font-size: 15px;
line-height: 2;
display: inline-block;
}
ul.main-ul a
{
text-decoration: none;
color: #fff;
display: block;
}
ul.main-ul > li
{
float: left;
padding: 0 12px 0 12px; /*ORG5px*/
height: 35px;
}
ul.main-ul > li > ul.dropdown
{
padding: 0;
margin: 0;
width: 180px;
list-style-type: none;
display: none;
}
ul.main-ul > li:hover > ul.dropdown
{
display: block;
}
ul.main-ul > li > ul.dropdown > li
{
background-color: black;
height: 33px;
border-bottom: 0.5px solid #ffffff75;
color: white;
}
ul.main-ul > li > ul.dropdown > li a
{
padding: 0 20px;
}
ul.main-ul > li > ul.dropdown > li:last-child
{
border-bottom: 0px;
}
/*-------------------------------------*/
#header-img
{
float: left;
z-index: 500;
margin: 0 auto;
padding: 0;
max-width: 5184px;
height: auto;
}
#header-img img
{
width: 100%;
display: block;
}
/*-------------------------------------*/
#content
{
-webkit-box-shadow: 5px 5px 18px -4px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 18px -4px rgba(0,0,0,0.5);
box-shadow: 5px 5px 18px -4px rgba(0,0,0,0.5);
width: 1150px;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
/*-------------------------------------*/
#footer
{
height: 72px;
}
#footer-content
{
background-color: #2c2c2c;
padding: 20px;
text-align: center;
font-weight: 400;
font-size: 16px;
color: #f0f0f0d7;
}
/*-------------------------------------*/
