Czy divy trzeba zamykać </div> i dlaczego stopka się wyświetla za duża?
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta name="description" content="dysortografia, dysgrafia i dyskalkulia polegają na myleniu liter albo cyfr ze sobą.">
<title>Czym jest dyskalkulia?</title>
<meta name="keywords" content="dysleksja, dyskalkulia, dysortografia, dysgrafia, rodzaje dysleksji, dyskalkulii, dysgrafii,dyskalkulia rozwojowa;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="tastronawygladatak-a.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
</header>
<div id="main">
<div id="flex-article-1">
<p><dfn>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</dfn></p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
<li style= text-indent: 28px;>
</ul>
<hr>
<p><dfn>Lorem ipsum</dfn>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</flex-article-1>
<hr>
<div id="flex-article-2">
<p><dfn>Lorem ipsum</dfn>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec</p>
</flex-article-2>
<hr>
<div id="flex-article-3">
<p><dfn>Lorem ipsum</dfn>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa</p>
</flex-article-3>
</main>
<aside>
<img src= "IMG_20220827_071355.jpg">
</aside>
<footer>
<p>© czym-dyskalkulia.pl 2021</p>
</footer>
</body>
</html>
#main {
background: #ffffff;
margin: 80px auto;
border-radius: 20px;
border: 60px solid #ffffff;
outline: 2px solid #cfd2e2;
outline-offset: -60px;
}
}
#main::before,
#main::after {
content: "";
position: absolute;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #d4d7e5, #bfc3d4);
border-radius: 20px 0 0 0;
z-index: -1;
}
#main::before {
top: -60px;
left: -60px;
}
#main::after {
bottom: -60px;
right: -60px;
}
&footer{
font-size: 18px;
display: inline;
text-align: center;
}
