Stop the side navbar from squeezing content
<p>I'm using the sample code to create a side navbar, see the code below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;style&gt;
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
&lt;/style&gt;
&lt;body&gt;

&lt;div id="mySidenav" class="sidenav"&gt;
  &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
  &lt;a href="#"&gt;Findme About&lt;/a&gt;
  &lt;a href="#"&gt;Services&lt;/a&gt;
  &lt;a href="#"&gt;ents&lt;/a&gt;
  &lt;a href="#"&gt;Contact&lt;/a&gt;
&lt;/div&gt;

&lt;div id="main"&gt;
  &lt;h2&gt;Sidenav Push Example&lt;/h2&gt;
  &lt;p&gt;Click on the element below to open the side navigation menu, and push this content to the right.&lt;/p&gt;
  &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;&amp;#9776; open&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
&lt;/script&gt;
     
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>But I do find a problem, if I change</p>

<pre><code>&lt;a href="#"&gt;About&lt;/a&gt;
</code></pre>

<p>to </p>

<pre><code>&lt;a href="#"&gt;Findme About&lt;/a&gt;
</code></pre>

<p>, and now try see the result again when you try to slide the navbar, you'll realize that the "Findme" will be squeezed to the below row of "About" thus make them in two rows when opening or closing the bar.
How can I stop it? I want "Findme" and "About" to be on the same row however.</p>