justified multiline with <br> responsive equidistant navigation menu in html and css
<p>New to the forum!
I think i've looked quite a bit already before posting this but if this was addressed before please excuse me.</p>

<p>trying to build a menu in html and css. my requirement is to build a responsive menu with multi line but the list items should be in equal distance from each other. Also the first list item of the menu should be left aligned with the container and the last list item should be right aligned with the container. Responsiveness is important! Any help would be appreciated.</p>

<p>html...</p>

<pre><code>  &lt;nav class="top-nav"&gt;
    &lt;ul &gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt; lorem &amp;&lt;br&gt; ipsums&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt; lorem &lt;br&gt; ipsums&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;lorem &amp; &lt;br&gt; ipsums&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;lorem &lt;br&gt; ipsum ipsum&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Lorem&lt;br&gt; ipsum ipsum&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;lorem lorem &lt;br/&gt;ipsum &amp; ipsum&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Loerm Ipsum&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>css..</p>

<pre><code>    .top-nav{
        max-width: 1166px;
        width: 100%;
        /*border:1px solid orange;*/
        line-height: 1em;
        margin: 0 auto; 
        height: auto;
        text-align: justify;
    }

    .top-nav ul{
        padding:0;
        margin: 0;
        vertical-align: middle;
        /*border:1px solid green;*/
        font-family: roboto;
    }

    .top-nav li{
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        margin-right: 4.92%;
    }

    .top-nav li:last-child{
        margin-right: 0;
    }
</code></pre>