title: Css navigation bar (css&html) issue
body: <p>So, i have this navigation bar:</p>
  
  <p><img src="https://i.stack.imgur.com/Fjcpi.png" alt="Nav bar without borders"></p>
  
  <p>I want to put a border around it, but it becomes bigger, which i do not like:</p>
  
  <p><img src="https://i.stack.imgur.com/UdCxg.png" alt="Nav bar with borders"></p>
  
  <p>I try to set height of the navigation bar, but the links do not fit in anymore, and there's no way to put them back in:</p>
  
  <p><img src="https://i.stack.imgur.com/fxNa5.png" alt="Nav bar with height set"></p>
  
  <p>Please help.</p>
  
  <p>Code(CSS):</p>
  
  <pre><code>#navigation {
      margin: 0 auto;
      background-color: #FFFFFF;
      //font-family: lkth;
      border: double;
      border-width: 5px;
      border-color: #663D07;
      border-radius: 10px;
      height: 40px;
  }
  #navLi {
      display: inline-block;
      margin-right: 10px;
  }
  .navA {
      color: #000000;
  }
  </code></pre>
  
  <p>Code(HTML):</p>
  
  <pre><code>&lt;div id="navigation"&gt;
      &lt;ul id="navUl"&gt;
          &lt;li id="navLi"&gt;&lt;a class="navA" href="#"&gt;&lt;p&gt;Page d'accueil&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="navLi"&gt;&lt;a class="navA" href="#"&gt;&lt;p&gt;Evénements&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="navLi"&gt;&lt;a class="navA" href="#"&gt;&lt;p&gt;Contactez nous&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Edit:</strong>
  I get this if i display navLi as block and Navigation as inline-block:
  <img src="https://i.stack.imgur.com/n48uX.png" alt="enter image description here"></p>