CSS Menu bar border - html

Question

I'm trying to have these small left and right borders either side of the text. Here is what I'm trying to make:
http://imgur.com/xCZnGgJ
My problem is that the borders are not the same height of the surrounding div however they only go the same height of the text. Here is a screen shot:
http://imgur.com/I2jjsAm
I have dried adding height: 30px to the li and ul however this does not change anything.
*{margin:0;}
#header {
width:100%;
}
#pre_header {
width:100%;
height:30px;
background-color:#202020;
}
.pre_header_content {
margin:0 auto;
width:1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height:30px;
}
#pre_header li {
display: inline;
border-right: .5px solid #414141;
border-left: .5px solid #414141;
}
#pre_header a {
text-decoration:none;
color:#fff;
padding:6px 15px 6px 15px;
}
#pre_header a:hover {
background-color:#4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
If anyone knows is there also anyway to bring the two borders together closer also?

Answer 1

Add the padding:6px 15px 6px 15px; to the li instead of a. And also, 0.5px does not work. What's half a pixel? Updated your code. See below!
EDIT: Note: I also changed your hover effect to affect the li element instead of a.
*{
margin:0;
box-sizing: border-box;
}
#header {
width:100%;
}
#pre_header {
width:100%;
height:30px;
background-color:#202020;
}
.pre_header_content {
margin:0 auto;
width:1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
line-height:30px;
}
#pre_header li {
display: inline;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
padding: 0 15px;
float:left;
margin-right: 2px;
}
#pre_header li:last-child{
margin-right: 0;
}
#pre_header a {
text-decoration:none;
color:#fff;
}
#pre_header li:hover {
background-color:#4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>

Answer 2

You could simply change the li to display: inline-block; I've created a jsfiddle for you.
#pre_header li {
display: inline-block;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
}
Also, don't use .5px, use a single amount. I have used 1px.
http://jsfiddle.net/xeqsn83a/

Answer 3

If you want the borders to touch, you would need to float it. And as others have mentioned, your border width needs to be an actual pixel size. There is no such thing as .5px. Here is an example of what (I think) you are trying to do:
http://jsfiddle.net/tuc4Lwuu/
#pre_header li {
float: left;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
margin-right: 2px;
}

Answer 4

Try this:
* {
margin: 0;
}
#header {
width: 100%;
}
#pre_header {
width: 100%;
height: 30px;
background-color: #202020;
}
.pre_header_content {
margin: 0 auto;
width: 1040px;
}
#pre_header ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 0;
}
#pre_header li {
display: inline-block;
border-right: 1px solid #414141;
border-left: 1px solid #414141;
margin-right: 1px;
}
#pre_header a {
text-decoration: none;
color: #fff;
padding: 6px 15px 6px 15px;
font-size: 16px;
line-height: 30px;
}
#pre_header a:hover {
background-color: #4e4e4e;
}
<div id="header">
<div id="pre_header">
<div class="pre_header_content">
<ul>
<li>Voucher codes</li>
<li>In-store codes</li>
<li>Online codes</li>
<li>Free samples</li>
<li>Advertise</li>
</ul>
</div>
</div>
<div id="main_header">
<div class="main_header_content">
Test
</div>
</div>
</div>
I changed display: inline to inline-block for li and border-width to 1px (it has to be an integer). Also made li items closer to each other with font-size: 0 technique (read this article for understanding).