Difficulties with div and id arrangement when making my own header bar - html

Question

I'm trying to make a header bar that looks similar to Bootstrap. If you view this document now the problem is that 'Item 1' is displayed correctly but 'Item 2' is pushed below it, instead of being to the right of it. I thought that by setting "left:80px' to 'Item 2' it would go 80px right of item 1.
Please let me know how to fix this. I was also wondering if I'm doing this in a smart way or if stacking the elements (.items > #item_1) is better. Thanks!
CSS
/* header, logo, and items */
#header {
width: 100%;
height: 45px;
position: absolute;
top: 0px;
left: 0px;
background: #3b5998;
text-align: left;
box-shadow: 0px 1px 0px #888888;
}
.items {
top: 0px;
right: 0px;
width: 200px;
height: 23px;
padding-top: 11px;
padding-bottom: 11px;
position: absolute;
background: #3b5928;
text-align: center;
font-family: 'Calibri';
font-size: 18px;
color: #f7f7f7;
}
#item_1 {
width:80px;
background: fff;
}
#item_2 {
width: 80px;
left: 80px;
background: #3b7328;
}
HTML
<!--Header and Footer-->
<div id="header">
<div class="items">
<div id="item_1"> Item 1 </div>
<div id="item_2"> Item 2 </div>
</div>
</div>

Answer 1

One approach would be to change the display of the elements to inline-block. (example)
.items > div {
display:inline-block;
}
Alternatively, you could float the elements or use a flexbox layout.
It's worth noting that you can't position a static element (i.e., position:static - the default). If you wanted left: 80px to work, you could add position:relative or position:absolute - fixed would work too. (example) As the example demonstrates, this isn't really an effective way to line the elements up though. It would be better to either float them or make them inline.
#item_2 {
width: 80px;
left: 80px;
background: #3b7328;
position: relative;
}

Answer 2

Here is a JS Fiddle, next time you should set one up. It's very useful for other people to see your issue.
<!--Header and Footer-->
<div id="header">
<div class="items">
<div id="item_1"> Item 1 </div>
<div id="item_2"> Item 2 </div>
</div>
</div>
#item_1 {
width:80px;
color: black;
background: #fff;
position: relative;
float: left;
display: inline-block;
}
#item_2 {
float: left;
width: 80px;
background: #3b7328;
position: relative;
display: inline-block;
}
http://jsfiddle.net/ws5ew/