Thiết kế website giá rẻ

Question

First of all heres my html:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Qualitätsstifte</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="header">
      <h1 class="title"><u>Qualitätsbleistifte, bezahlbar...</u></h1>
      <div class="navi">
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="explore.html">Explore</a></li>
            <li><a href="cart.html">Cart</a></li>
            <li><a href="help.html">Hilfe</a></li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="main">
    <div class="DescriptionBig">
      <div class="Description">
        <div class="DescriptionText">
          <p>Entdecken Sie <a href="https://www.faber-castell.de/" style="text-decoration-color: rgb(144, 0, 0);"><em style="color: rgb(0,0,0);">Faber-Castell's</em></a> umweltbewussten Bleistifte! Unsere Bleistifte werden aus hochwertigen, nachhaltigen Materialien hergestellt und unter fairen Arbeitsbedingungen von Hand gefertigt. Mit zertifiziertem Holz aus nachhaltiger Forstwirtschaft und umweltfreundlichen Farbstoffen bieten wir Ihnen nicht nur qualitativ hochwertige Schreibwaren, sondern auch die Gewissheit, dass Sie einen positiven Beitrag für die Umwelt leisten. Tauchen Sie ein in unsere Auswahl und erleben Sie Schreibkomfort mit gutem Gewissen!</p>
        </div>
        <div class="DescriptionImage">
          <img src="Bleistift.png" alt="Bleistift"/>
        </div>
      </div>
      <div class="DesPlant">
        <img src="plant.png">
        <img src="plantinvert.png" id="plantTemp">
        <img src="plant.png" id="plant2Temp">
      </div>
    </div>
    </div>
    <div class="footer"></div>
  </body>
</html>

and my css:

.navi {
    padding: 10px; /* Add padding around the navigation items */
    background-color: rgb(65, 80, 143);
    text-align: center; /* Center align header content */
    width: fit-content; /* Set width to fit the content */
    margin: auto; /* Center the container horizontally */
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for a lifted effect */
    color: rgb(46, 46, 46);
}

.header {
    background-color: rgb(95, 117, 205);
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for a lifted effect */
    max-width: 700px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}

.DescriptionBig {
    background-color: rgb(95, 117, 205);
    border-radius: 10px;
    padding-top: 20px;
    text-align: center;
    margin-top: 15px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.header nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.header nav ul li {
    display: inline-block; /* Display list items inline */
    margin-right: 5px; /* Adjust spacing between menu items */
    padding: 5px 10px;
    background-color: rgb(137, 181, 247);
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for a lifted effect */
}

.header nav ul li:last-child {
    margin-right: 0; /* Remove margin from the last item */
}

.header nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: rgb(46, 46, 46);
}

@keyframes example {
    from {-webkit-box-shadow:0px 0px 0px 0px rgba(45,255,196,0);
        -moz-box-shadow: 0px 0px 0px 0px rgba(45,255,196,0);
        box-shadow: 0px 0px 0px 0px rgba(45,255,196,0);}
    to {-webkit-box-shadow:0px 0px 26px 0px rgba(255, 255, 255, 0.84);
        -moz-box-shadow: 0px 0px 26px 0px rgba(255, 255, 255, 0.84);
        box-shadow: 0px 0px 26px 0px rgba(255, 255, 255, 0.84);}
}

@keyframes example2 {
    from {-webkit-box-shadow:0px 0px 26px 0px rgba(255, 255, 255, 0.84);
        -moz-box-shadow: 0px 0px 26px 0px rgba(255, 255, 255, 0.84);
        box-shadow: 0px 0px 26px 0px rgba(255, 255, 255, 0.84);}
    to {-webkit-box-shadow:0px 4px 4px 0px rgba(45,255,196,0);
        -moz-box-shadow: 0px 4px 4px 0px rgba(45,255,196,0);
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);}
}

.header li:hover {
    background-color: rgb(82, 101, 180);
    animation-name: example;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.header li:not(:hover) {
    animation-name: example2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}


body {
    background-color: rgb(147, 163, 227);
    color: rgb(46, 46, 46);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.DescriptionText {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    flex: 1;
}

.DescriptionImage img {
    width: 200px;
    height: auto;
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    margin-right: 20px;
}

.Description {
    display: flex; /* Use flexbox */
    align-items: center; /* Align items vertically */
}

.DesPlant {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: -10px;
}
  
.DesPlant img {
    width: 25px;
    height: auto;
    
}

#plantTemp {
    margin-left: 100px;
    width: 40px;
    height: auto;
}

#plant2Temp {
    margin-left: 200px;
}

.main {
    max-width: 700px;
}

my problem is, that i want the both header class and main class to have a max width so these always have the same width but limited so the text doesnt look too awful when the screen is too wide. As you can see, when look at the page in a browser the main part works beautiful and limits its size. But for the header class it doesnt work. Its width ends way before the maximum limit, it looks like its stopping in width so that all its objects fit in but i want to go it to the full maximum width.

I have no idea what the problem is (im also pretty new to html)

Thiết kế website giá rẻ

Danh mục

Html Div doesnt change width with max-width