Wyrównanie img w poziomie bez scroll'a

Question

Cześć,

prośba o pomoc: próbuję ustawić elementy jeden obok drugiego ale wciska się nie wiedzieć czemu scroll. Czy możecie mi wyjaśnić jak to zrobić prawidłowo i wyjaśnić dlaczego tak się dzieje? 

        <section id="natura"><a href="#"><img src="img/natura/dzie%C5%84%206%20(56).jpg" alt="#"></a></section>
        <section id="artystyczne"><a href="#"><img src="img/artystyczne/PierzchalskaKarolina_MG_1552.JPG" alt="#"></a></section>
        <section id="dzieci"><a href="#"><img src="img/dzieci/_MG_0327.jpg" alt="#"></a></section>
        <section id="repotaz"><a href="#"><img src="img/repotraz/1920951_305450292991086_3000872418126524721_o.jpg" alt="#"></a></section>
        <section id="portrety"><a href="#"><img src="img/portrety/10542011_305890896280359_8729694179108008196_n.jpg" alt="#"></a></section>
        <section id="zwierzeta"><a href="#"><img src="img/zwierzeta/IMG_5485%20kopia.JPG" alt="#"></a></section>

section {
    width: 100vw;
}

section img {
    width: 20vw;
    height: 50vh;
    overflow: hidden;
    float: left;
}

 

Answer 1

Dodaj do body właściwość:

body{ 
   margin:0;
}

Edit:

Dlaczego? Ponieważ body oraz niektóre inne znaczniki mają domyślne style, więc jak ktoś chce to może je wyzerować.

Typical default display properties:

body {
display: block;
margin: 8px; 
}

body:focus {
outline: none; 
}

Dodaje bodajże z każdej strony po 8px marginesu, a Ty masz pięć elementów o szerokości 20vw, więc jeśli nie wyzerujesz margin na 0, to doda scroll'a, ponieważ cały content strony nie mieści się. 5*20vw+8px*2=100vw+16px. O 16px content wychodzi poza obszar ekranu, jak widać.

Jest jeszcze inne rozwiązanie, możesz napisać tak:

*{
   overflow-x:hidden;
}

Ale po tym rozwiązaniu, to co wyjdzie poza obszar ekranu, to nie będziesz mógł przewinąć scroll'em.

https://www.w3.org/TR/2011/WD-html-markup-20110525/body.html#body

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body

Comments

To nie to (chyba, że coś skopałem)

w css mam :

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

i nic to nie zmienia...

---

Chociaż teraz jak się zastanowiłem to pewnie pionowy scroll bierze parę px i pewnie dlatego tworzy się ten poziomy.

---

U mnie jest OK. Znajdź u siebie te(n) znacznik(i) i/lub właściwoś(c/ć)/(i), które rozpychają ci tego body, czy co tam masz. Utwórz nowy projekt (plik) wklej tylko ten HTML, co podałeś w pytaniu i tylko ten CSS + do tego tylko to:
 

body {
   margin:0;
}