insert a break after a certain line (inline-block) unordered list

I am making a project website for HTML/CSS without the use of Javascript. I am currently struggling with adding a break between 2 list items when the screen reaches a certain max-with. The only solution I found is adding a break between the list but I know that isn't valid.

HTML:

<nav>
<h2>Menu</h2>
<ul class="menu">
    <li class="pagina">Home</li>
    <li><a href="html/offerte.html">Aanvraag offerte</a></li>
    <li><a href="html/verhuur.html">Verhuur verhuiswagen of ladderlift</a></li>
    <br>
    <li><a href="html/stappenplan.html">Stappenplan verhuis</a></li>
    <li><a href="html/geschiedenis.html">Geschiedenis</a></li>
    <li><a href="html/contact.html">Contact</a></li>
</ul>
</nav>

CSS:

.menu br 
{
display: none;
}

@media screen and (max-width: 859px) {
.menu br 
{
    display: inline-block;
}
}

@media screen and (max-width: 477px) {
.menu li
{
    display: block;
}

.menu br
{
    display: none;
}

main {
    position: static;
    margin: 10px;
}

body {
    min-width: 340px;
}
}