Tell us what’s happening:
Why does the border of my main element not cover the whole element?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<title>Körper stärken und die Flexibilität verbessern</title>
</head>
<body>
<nav id="navbar">
<header>Mobilität & Stärke</header>
<div class="cat">
<ul>
<div class="divider"></div>
<li><a href="#bewegung">Die Bewegung</a></li>
<div class="divider"></div>
<li><a href="#schulterblätter">Die Schulterblätter</a></li>
<div class="divider"></div>
<li><a href="#nacken">Der Nacken</a></li>
<div class="divider"></div>
<li><a href="#knie">Die Knie</a></li>
<div class="divider"></div>
<li><a href="#gelenke">Die Gelenke</a></li>
<div class="divider"></div>
<li><a href="#oberschenkel">Die Oberschenkel</a></li>
<div class="divider"></div>
<li><a href="">Die Füße</a></li>
<div class="divider"></div>
<li><a href="">Die Waden</a></li>
<div class="divider"></div>
<li><a href="">Die Waden</a></li>
<div class="divider"></div>
<li><a href="">Die Waden</a></li>
<div class="divider"></div>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
<li><a href="">Die Waden</a></li>
</ul>
</div>
</nav>
<main id="main-doc">
<section class="main-section">
<header id="bewegung" class="header">Die Bewegung</header>
<p class="text">Bewegung ist jede Aktivität der Skelettmuskulatur, die zu einem höheren Energieverbrauch führt als in Ruhe. Bewegung ist körperliche Betätigung und entsteht durch Zusammenziehen oder Anspannen der Muskeln. Je nachdem ist der Muskel mit oder ohne Bewegungseffekt aktiv</p>
</section>
<section class="main-section">
<header id="schulterblätter" class="header">Warum ist Bewegung so wichtig?</header>
<p class="text">
Bewegung ist aus vielen Gründen wichtig! Sie trägt nicht nur zur körperlichen Gesundheit bei, indem sie das Herz-Kreislauf-System stärkt und die Muskulatur aufbaut, sondern hat auch positive Auswirkungen auf die mentale Gesundheit. Regelmäßige Bewegung kann Stress abbauen, die Stimmung heben und das allgemeine Wohlbefinden steigern. Außerdem fördert sie die Flexibilität und Koordination, was im Alltag von Vorteil ist. Insgesamt hilft Bewegung, ein gesundes Gewicht zu halten und das Risiko für chronische Krankheiten zu reduzieren. Es ist also eine wunderbare Möglichkeit, Körper und Geist in Einklang zu bringen!</p>
</section>
<section class="main-section">
<header id="nacken" class="header">Was passiert bei zu wenig Bewegung?</header>
<p class="text">
Bei zu wenig Bewegung können verschiedene negative Auswirkungen auf den Körper und die Gesundheit auftreten. Physisch kann es zu einer Schwächung der Muskulatur und einer Abnahme der Knochendichte kommen, was das Risiko für Verletzungen und Osteoporose erhöht. Auch das Herz-Kreislauf-System kann beeinträchtigt werden, was zu einem erhöhten Risiko für Herzkrankheiten und Bluthochdruck führen kann.
Mentale Gesundheit kann ebenfalls betroffen sein. Bewegungsmangel kann zu einem Anstieg von Stress, Angstzuständen und Depressionen führen. Zudem kann die allgemeine Energie und Lebensqualität sinken.
Langfristig kann ein Mangel an Bewegung auch zu Übergewicht und damit verbundenen chronischen Erkrankungen wie Diabetes oder Stoffwechselstörungen führen. Es ist also wichtig, regelmäßig aktiv zu sein, um sowohl körperlich als auch geistig gesund zu bleiben!
</p>
</section>
<section class="main-section">
<header id="knie" class="header">Die Knie</header>
<p>Test test test</p>
</section>
<section class="main-section">
<header id="gelenke" class="header">Die Gelenke</header>
</section>
<section class="main-section">
<header id="oberschenkel" class="header">Die Oberschenkel</header>
</section>
</main>
</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
}
body {
width: 100%;
}
ul {
list-style-type: none;
margin: none;
padding: 0;
}
nav {
min-width: 300px;
height: 100%;
position: fixed;
}
main {
border-left: 3px solid #a7a7a7;
margin-left: 19em;
border: 2px solid black;
}
body {
display: flex;
}
#navbar header {
padding: 1em 0;
font-weight: bold;
font-size: 20px;
margin-left: 1.8em;
}
#navbar ul li {
margin: 0.7em 0;
margin-left: 2em;
font-size: 16px;
}
a {
color: black;
text-decoration: none;
}
.divider {
border-bottom: 1px solid #a7a7a7
}
.cat {
overflow: auto;
width: 100%;
height: 100%;
}
main {
padding: 0em 2em;
}
#bewegung {
font-size: 20px;
font-weight: bold;
}
.header {
font-size: 20px;
font-weight: bold;
margin-bottom: 1.5em;
margin-top: 2em;
}
.text {
font-size: 16px;
margin-left: 1em;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page