title: Nav bar on 1 line but one element on 2 lines
body: <p>I would like to put an element of my nav bar on two lines.</p>
  <p>But when I just add a <code>&lt;br /&gt;</code> inside, it breaks everything.</p>
  <p>Here is what I want :
  <a href="https://i.stack.imgur.com/7yn6X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7yn6X.png" alt="enter image description here" /></a></p>
  <p>Here is what I have :</p>
  <p><a href="https://i.stack.imgur.com/k1fZr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k1fZr.png" alt="enter image description here" /></a></p>
  <p>Here is my html code:</p>
  <pre><code>div class=&quot;nav-top-home-page&quot;&gt;
    &lt;nav&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;a&gt;&lt;img class=&quot;logo&quot; src=&quot;./assets/img/logo.png&quot; height=&quot;200px&quot;&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a&gt;BLOG&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a (click)=&quot;openLoginModal()&quot;&gt;&lt;img src=&quot;./assets/img/LOCK.png&quot;/&gt;ME CONNECTER&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id=&quot;subscribe&quot;  routerLink='./register'&gt;M'INSCRIRE&lt;/a&gt;&lt;/li&gt;
          &lt;li id=&quot;nav-gestionnaire&quot;&gt;&lt;a&gt;Vous êtes &lt;br/&gt; GESTIONNAIRE ?&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;  
      &lt;/div&gt;
    &lt;/nav&gt;      
  &lt;/div&gt;
  </code></pre>
  <p>Here is my css code :</p>
  <pre><code>.nav-top-home-page{
    height:600px;
    position: relative;
    z-index: 5;
    background-color: #6f8ab1;
    text-align: center;
  }
  
  .nav-top-home-page::before {
    content: &quot;&quot;;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(assets/img/home/slide1.png) white center top no-repeat;
    background-size: cover;
  }
  
  .nav-top-home-page nav div{
    padding-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
  }
      
  .nav-top-home-page nav .logo{
    float:left;
  }
  
  .nav-top-home-page nav ul{
    padding: 0px;
    margin: 0px;
    float: right;
  }    
  
  .nav-top-home-page nav li{
    display: inline;
  }
  
  .nav-top-home-page nav li a{
    color: white;
    font-size: 1em;
    line-height: 70px;
    padding: 5px 15px;
    cursor: pointer;
    font-family: Raleway, arial;
  }
  
  .nav-top-home-page nav li {
    cursor: pointer;
  }
  
  #nav-gestionnaire{
    display: inline;
  }
  </code></pre>
  <p>I tried changing the <code>width</code>, or adding <code>whitespace: nowrap</code> and many other things, but nothing worked.</p>
  <p>Can someone help me pls ? :/</p>