Dlaczego element inline-block się nie mieści?

pytanie zadane 16 maja 2023 w HTML i CSS przez niezalogowany

Dlaczego element inline-block o klasie feature nie mieści się w jednej linii po zmniejszeniiu okna przegladarki?

<!DOCTYPE html>

<html lang="pl">

<head>

<meta charset="UTF-8">
<title>Document</title>


<style>


* {


margin:0;

padding:0;




}

nav {

margin:30px 0;
text-align:right;

max-width:1440px;

margin: 30px auto;

}

.reservation {

font-size: 2.2rem;

border: 2px solid #555;
padding: 10px 30px;

letter spacing: 1px;
margin-right: 50px;
transition: .2s;
margin-left:80px;


}

.reservation:hover {

background-color: royalblue;
color: #eee;
border-color:royalblue;


}


nav a:hover {
border-bottom: 2px solid #555;
color: black;

}
html {
font-size:10px;
font-family:arial;

}
nav a {
display-inline-block;

font-size:1.8rem;
text-transform: uppercase;

text-decoration: none;
color: #555;
padding:10px;

margin:0 20px;

}


header {

background-image:url('auto2.jpg');
height:40vh;
background-size:cover;
}

header h1 {

font-size:6rem;
color:white;
text-align:center;

line-height:40vh;
background-color:rgba(0, 0, 0, 0.5);
}

footer {
background-color: #000;

}


footer p {

color: white;

text-align:center;

padding: 2rem 0;
font-size: 2rem;


}

main {

max-width: 1440px;

margin: 5vh auto;



}


.description {


font-size:6.2rem;

text-align:center;
margin: 0 30px 50px 30px;
}

.feature {
display:inline-block;
width:33%;
background-color:aqua;
}
</style>
</head>


<body>

<nav>

<a href="#">naprawy</a>
<a href="#">części</a>
<a href="#">holowanie</a>
<a href="#"class="reservation">umów wizytę</a>
</nav>

<header>

<h1>Tanio szybko Średnio</h1>




</header>


<main>

<p class="desrciption">fgsdfhgbesfhodlgbnesfgwogwer</p>
<section class="features">

<div class="feature">

<div class="image"></div>
<h2>Poprawianie liczników</h2>
</div>

<div class="feature">
<div class="image"></div>
<h2>Część po recyklingu</h2>
</div>

<div class="feature">
<div class="image"></div>
<h2>Wynajdowanie usterek</h2>

</div>



</section>

</main>


<footer><p>%copy;Warsztat "Fura"</p></footer>



</body>
</html>