css issue li in same line 50% of width - html

Question

http://liveweave.com/BNM1Jj
I try to put both li element in same line occupying 50% of width but i could not get them in same line
i do not want to use table structure .
unable to put both li in same line why so ??
ul.primary_nav{
background-color:#494949;
}
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949; float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
}
ul.primary_nav li a{
display:block;
height:36px;
text-align:center;
color:#c5c5c5;
font-size:13px;
text-shadow:0px 1px 0px #2a2a2a;
text-decoration:none;
font-weight:bold;
}
ul.primary_nav li a span.icon{
display:block;
margin:auto;
width:22px;
height:22px;
}
please tell what i am missing

Answer 1

Make the following change:
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949;
float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
float:left;
}
Notice the float:left; that will get them on the same line.

Answer 2

Remove the whitespace between li elements and add box-sizing: border-box to ul.primary_nav li:
Demo
HTML:
<div class="moby_wrap">
<header>
<a id="logo" href="#">Header</a><br>
<ul class="primary_nav">
<li class="selected"><a><span class="icon about"></span>Rings & Pendants</a></li><li><span class="icon folio"></span>Earrings and Cufflinks</li>
</ul>
</header>
CSS:
ul.primary_nav li{
display:inline-block;
padding-top:5px;
padding-bottom:5px;
width: 50%;
box-sizing: border-box;
box-shadow:inset 0 0 1px #7d7d7d;
-webkit-box-shadow:inset 0 0 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}

Answer 3

Option 1: (Which you might not want)
Make primary_nav rendered as a table & li as table cells
ul.primary_nav{
background-color:#494949;
border-radius:3px;
width:100%;
display:table;
}
ul.primary_nav li{
display:table-cell;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
box-shadow:inset 0px 0px 1px #7d7d7d;
-webkit-box-shadow:inset 0px 0px 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}
Option 2:
Make li as float left with border none.
Then use another inside for styling.
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
border:none;
float: left;
}

Answer 4

I think that you could have a better result using divs elements instead a ul.
Take a look a this code:
HTML
<header>
<div>
Header
</div>
<div class="menuitem">
Link 1
</div>
<div class="menuitem">
Link 2
</div>
</header>
CSS
header {
width: 100%;
text-align: center;
background-color: red;
}
div.menuitem {
width: 50%;
float: left;
text-align: center;
background-color: orange;
height: 50px;
}
It's an easy html structure, less css to write and a code more readable (and also fluid content).
Check out this codepen.