Witam wszystkich grupowiczów, problem mam z tymi odstępami od divów tzn. footera od article,left,right no i logo od wymienionych już sekcji, do tego dochodzą odstępy np. logo od górnej krawędzi (chciałbym aby okalały całość miejsca bez pozostawienia takiego nieładnego paska) i footera od dolnej krawędzi (jest taka sama jak przy logo ale ustawiłem mniejszą wysokość od wysokości monitora i chyba dlatego pokazuje tak), podjąłem się głębszego zapoznania z HTML i CSS dlatego postanowiłem na pierwszy rzut wziąć flexboxy, przyjmę przy okazji każdą radę.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Egzamin </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logo">
<h1> Logo</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id metus hendrerit, facilisis arcu at, posuere ante. In interdum sagittis libero non faucibus. Nunc finibus scelerisque maximus. Morbi at aliquet diam. Duis elementum libero vitae turpis dictum varius. Phasellus nunc mauris, pellentesque a commodo eu, tincidunt vel diam. Aliquam mauris lacus, ullamcorper et est at, molestie fringilla felis. Suspendisse justo mi, dictum in nisl quis, facilisis commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis et magna in cursus. Pellentesque et nunc sagittis, gravida neque sed, convallis dui. Donec gravida arcu non sodales imperdiet. Cras lorem augue, lobortis et placerat ac, pellentesque tincidunt tortor. Aenean laoreet eros dolor, vitae interdum purus sodales ut. Nam semper ligula ut velit maximus, eget vulputate dolor condimentum.</p>
</div>
<div class="container">
<div class="article">
<h1> Article</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id metus hendrerit, facilisis arcu at, posuere ante. In interdum sagittis libero non faucibus. Nunc finibus scelerisque maximus. Morbi at aliquet diam. Duis elementum libero vitae turpis dictum varius. Phasellus nunc mauris, pellentesque a commodo eu, tincidunt vel diam. Aliquam mauris lacus, ullamcorper et est at, molestie fringilla felis. Suspendisse justo mi, dictum in nisl quis, facilisis commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis et magna in cursus. Pellentesque et nunc sagittis, gravida neque sed, convallis dui. Donec gravida arcu non sodales imperdiet. Cras lorem augue, lobortis et placerat ac, pellentesque tincidunt tortor. Aenean laoreet eros dolor, vitae interdum purus sodales ut. Nam semper ligula ut velit maximus, eget vulputate dolor condimentum.</p>
</div>
<div class="left">
<h1> Left</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id metus hendrerit, facilisis arcu at, posuere ante. In interdum sagittis libero non faucibus. Nunc finibus scelerisque maximus. Morbi at aliquet diam. Duis elementum libero vitae turpis dictum varius. Phasellus nunc mauris, pellentesque a commodo eu, tincidunt vel diam. Aliquam mauris lacus, ullamcorper et est at, molestie fringilla felis. Suspendisse justo mi, dictum in nisl quis, facilisis commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis et magna in cursus. Pellentesque et nunc sagittis, gravida neque sed, convallis dui. Donec gravida arcu non sodales imperdiet. Cras lorem augue, lobortis et placerat ac, pellentesque tincidunt tortor. Aenean laoreet eros dolor, vitae interdum purus sodales ut. Nam semper ligula ut velit maximus, eget vulputate dolor condimentum.</p>
</div>
<div class="right">
<h1> Right</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id metus hendrerit, facilisis arcu at, posuere ante. In interdum sagittis libero non faucibus. Nunc finibus scelerisque maximus. Morbi at aliquet diam. Duis elementum libero vitae turpis dictum varius. Phasellus nunc mauris, pellentesque a commodo eu, tincidunt vel diam. Aliquam mauris lacus, ullamcorper et est at, molestie fringilla felis. Suspendisse justo mi, dictum in nisl quis, facilisis commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis et magna in cursus. Pellentesque et nunc sagittis, gravida neque sed, convallis dui. Donec gravida arcu non sodales imperdiet. Cras lorem augue, lobortis et placerat ac, pellentesque tincidunt tortor. Aenean laoreet eros dolor, vitae interdum purus sodales ut. Nam semper ligula ut velit maximus, eget vulputate dolor condimentum.</p>
</div>
</div>
<div class="footer">
<h1> footer</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id metus hendrerit, facilisis arcu at, posuere ante. In interdum sagittis libero non faucibus. Nunc finibus scelerisque maximus. Morbi at aliquet diam. Duis elementum libero vitae turpis dictum varius. Phasellus nunc mauris, pellentesque a commodo eu, tincidunt vel diam. Aliquam mauris lacus, ullamcorper et est at, molestie fringilla felis. Suspendisse justo mi, dictum in nisl quis, facilisis commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis et magna in cursus. Pellentesque et nunc sagittis, gravida neque sed, convallis dui. Donec gravida arcu non sodales imperdiet. Cras lorem augue, lobortis et placerat ac, pellentesque tincidunt tortor. Aenean laoreet eros dolor, vitae interdum purus sodales ut. Nam semper ligula ut velit maximus, eget vulputate dolor condimentum.</p>
</div>
</div>
</body>
</html>
CSS
body{
width: 1000px;
height: 100%;
margin: auto;
padding: 0%;
background-color: skyblue;
}
div.container{
background-color: saddlebrown;
display: flex;
padding: 0%;
margin-top: 0;
flex-direction: row;
align-items: center;
margin: auto;
}
div.logo{
background-color: saddlebrown;
margin: 0;
padding: 0%;
}
div.footer{
background-color:seagreen;
margin: 0;
padding: 0%;
}
