Responsywność - tekst wychodzi poza obszar diva

Witam zacząłem robić stronę i chciałem aby była responsywna więc zacząłem od strony dla telefonów i potem chciałem użyć media queries dla innych rozdzielczości lecz napotkałem problem gdy w narzędziach programisty sprawdzam wygląd na różnych rozdzielczościach to jest ok ale w przypadku gdy wybieram opcję responsive zamiast modelu telefonu i zmniejszam wysokość strony to tekst wychodzi poza obszar diva. Czy mógłby mi to ktoś wyjaśnić raz na zawsze bo tego nie rozumiem. Pozdrawiam i dziękuję za wszelką pomoc!

Link do strony: http://naukacss.5v.pl/ oraz dokładne zdjęcie o jaki efekt mi chodzi:

w poprzednim temacie pytałeś po co stosować frameworki np. bootstrap, no właśnie po to abyś miał lepszą kontrolę nad responsem i uporządkowaniem kodu

Na zdjęciu na górze przy niektórych rozdzielczościach samochód przestaje być widoczny (mnie to wali, ale za podobne rzeczy zje*ki od grafików dostawałem i musiałem kombinować z background-size: cover czy innymi gównami, żeby na pewno było widoczne na obrazku to co ma być widoczne).

Możesz dodać takie style jakie dodaje klasa clearfix w bootstrapie, tzn. do swojej listy możesz dodać coś takiego:

ul::after {
    content: "";
    display: table;
    clear: both;
}

Na takie zachowanie wpływa float:left w li, który nie dodaje wysokości elementów do rodzica (w Twoim przypadku ul).

W klasie infocar dla znacznika ul zmień z:

min-height: 19vh;

na:

height: auto;
padding-bottom: 80px;

Powinn być ok.