Getting a nav bar to have equal spaces - html

Question

I have a slight problem with my code trying to get on the navbar, each section to have an equal amount of space and not have space according to how many characters they have in the title. For example, MAP should have as much as ABOUT.
Here is what it looks like now:
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 95%;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>

Answer 1

You could try this: fiddle
.wrap ul {
width:100%;
padding: 0;
}
.wrap li {
display:inline-block;
float: left;
width: 20%;
vertical-align:middle;
}

Answer 2

You just need
.wrap ul {
table-layout:fixed; /* this */
}
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 80%; /* adjusted for demo only */
table-layout:fixed;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>

Answer 3

Or look this way
.nav{
list-style: none;
}
.nav li{
display: inline-block;
min-width: 100px;
}
.nav li a{
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}