Nav bar inside body not spreading evenly using percentage?
<p>I am creating a nav bar and have 3 tabs e.g (home, about, contact) I wish to spread evenly. I want left &amp; right side of each tab to have a 15%. This should add up to a total of 90% of the page however the third tab seems to appear underneath on a separate line.</p>

<p>Am I missing a default margin somewhere or what am I doing wrong?
I want to stick to percentages as much as possible to suit multiple devices.</p>

<p>I have located the nav inside of the body. Please see CSS below:</p>

<pre><code>body {
background-color: pink;
}

h1 {
text-align: center;
margin-bottom: 4.5%;
color: #fff;
font-family: Florence, cursive;
text-shadow: 2px  0 black;
}

nav ul {
list-style: none;
}

nav li {
display: inline-block;
margin-left: 15%;
margin-right: 15%;
}
</code></pre>