Czemu siatka nie działa?

pytanie zadane 6 lipca 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
edycja 6 lipca 2018 przez Layoutowiec

Witam!

Więc zmieniłem kod mojej strony siatkę CSS ale coś chyba nie działa bo nie zmniejsza się to w taki sposób w jaki powinno ponieważ podczas zmniejszania trzecie zdjęcia w obu rzędach nie zmniejszają się i przez to na dole strony pojawia się pasek przewijania lewo-prawo

<section>
    <div class="container1">
        <div class="row">
            <div class="col-4" style=" margin-top: 40%;">
                <img src="img/nature.jpg"  alt="alternative text"></a>
            </div>
            <div class="col-4" style=" margin-top: 40%;">
                <img src="img/mountains.jpg"  alt="alternative text"></a>
            </div>
            <div class="col-4" style=" margin-top: 40%;">
                <img src="img/sea.jpg" alt="alternative text"></a>
            </div>
            <div class="col-4" >
                <img src="img/cliff.jpg" alt="alternative text"></a>
            </div>
            <div class="col-4">
                <img src="img/city.jpg"  alt="alternative text"></a>
            </div>
            <div class="col-4">
                <img src="img/freedom.jpg" alt="alternative text"></a>
            </div>
        </div>
    </div>
</section>

.container1
{
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 0 0 1%;
}
 
.row {
    clear: both;
}
 
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
    margin: 0 3% 0 0;
}

.col-4
{
    margin-left: 0;
    margin-right: 0;
}


@media screen and (min-width:768px)
{
	.col-1 {width: 5.5%;}
	.col-2 {width: 14%;}
	.col-3 {width: 22.5%;}
	.col-4 {width: 31%;}
	.col-5 {width: 39.5%; }
	.col-6 {width: 48%;}
	.col-7 {width: 56.5%;}
	.col-8 {width: 65%;}
	.col-9 {width: 73.5%;}
	.col-10 {width: 82%;}
	.col-11 {width: 90.5%;}
	.col-12 {width: 99%;}
}

No i co teraz trzeba zrobić aby to było tak jak ma być ?

Mam nadzieję że ktoś mi pomoże ;)

Dzięki za poświęcony czas!

1 odpowiedź

odpowiedź 7 lipca 2018 przez pablop76 VIP (123,180 p.)
edycja 7 lipca 2018 przez pablop76

Ponieważ jest użyta niepoprawnie. Cyferka w klasie col- oznacza, ile z dwunastu dostępnych kolumn zajmuje element oznaczony daną klasą. Suma tych warości musi być równa 12. Czyli col-4 zmieści się trzy razy bo 3*4=12. Dodatkowo brakuje kilku elementów siatki. Clear dla row nie jest potrzebny, nztomias jest konieczny element czyszczący przepływ kolymn. Dla poprawienia wyglądu dodaje się tzw. rynny do kilumn. Cały przyklad i filozofia siatki jest w sposób przystępny opisana na w3school