Problem z CSS

pytanie zadane 14 maja 2020 w HTML i CSS przez Mateusz G Początkujący (260 p.)

Mam następujący problem, który mnie bardzo irytuje. Mam 4 <a> z klasą menu. W CSS nadałem im width: 25% 3 są ustawione prawidłowo(w jednej Lini) a ostatni przeskakuje mi pod pierwszy jak zmienię na width: 24% ustawiają się prawidłowo wszystkie w jednej Lini. Nie rozumiem czemu tak nie robią jak ustawie 25%

komentarz 15 maja 2020 przez pablop76 VIP (123,180 p.)

Pokaż kod, a na pewno od razy dostaniesz odpowiedź

komentarz 15 maja 2020 przez Mateusz G Początkujący (260 p.)

<!DOCTYPE htm>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="vieport" content="width=device-width, initial-scale=1.0">
    <title>Druga strona</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="wrapper">
      <header>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Tarnobrzeg%2C_zalew_Machowski.jpg/1000px-Tarnobrzeg%2C_zalew_Machowski.jpg" alt="Zamek Wrota2" />
      </header>
      <nav>
         <a class="menu active" href="#">Zamki</a>
         <a class="menu" href="#">Jednostki</a>
         <a class="menu" href="#">Bohaterowie</a>
         <a class="menu" href="#">Szablony</a>
       </nav>
      <section>
        <article>
          <h1>Moja druga strona internetowa</h1>
          <p><img class="left" src="https://www.blasty.pl/m/upload/images/large/2017/12/taka-mape-to-ja-rozumiem-fani_2017-12-01_09-56-54.jpg" alt="mapa gry" />tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
            tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</p>
          <p>tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
            tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst </p>
          <p>tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</p>
        </article>
        <iframe width="1000" height="563" src="https://www.youtube.com/embed/3V3HeRnRNH8?start=88" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </section>
      <footer>Zrobiłem takie coś z pomocą "samuraj programowania" w około 2h</footer>
    </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  font-family: arial;
  box-sizing: border-box;
}

body {background-color: Khaki;}

#wrapper {
  max-width: 1000px;
  margin: 0 auto;
  background-color: white;
}
heder img{
  width: 100%;
  display: block;
}
nav {
  background-color: darkcyan;
}
nav a {
  display: inline-block;
  width: 24.655%;
  padding: 15px 30px;
  color: white;
  text-decoration: none;
  text-align: center;
}
a.menu:hover {background-color: crimson;}
.active {background-color: crimson;}

oto mój kod proszę o pomoc.

1 odpowiedź

odpowiedź 15 maja 2020 przez Restej Dyskutant (8,690 p.)

Chodzi o domyślny margines narzucany przez przeglądarkę który mi wygląda na jakieś może pół px. Dodaj do sekcji body margin: 0 i powinno wszystko być wporządku

komentarz 15 maja 2020 przez Restej Dyskutant (8,690 p.)

Chociaż jak tak teraz na to patrze to może jednak nie być tylko margines w sekcji body a rodzica w jakim siedzą twoje hiperłącza. Tak czy owak przyjrzyałbym się domyślnym marginesom narzucanym w którymś z tagów bądź przez ciebie