100% width div with child span won't right align

100% width div with child span won't right align

Given this fiddle, I want my menu to be at the right edge of the overall
"card", but for some reason it won't work. I've tried a couple different
methods (margins, right: 0, float) but they either don't work or I lose
the background color of the parent div (in the case of float where it
basically collapses the parent div).
Here is my current HTML and CSS, as seen in the fiddle.
<div class="server">
<div class="name">Server01</div>
<div class="menu">
<span class="items">
<span>Menu01</span>
<span>Menu02</span>
<span>Menu03</span>
</span>
</div>
<div class="content">
</div>
</div>
.server {
position: relative;
width: 400px;
height: 200px;
margin: 10px;
background-color: #686868;
}
.name {
font-size: large;
position: relative;
top: 0px; left: 0px; right: 0px;
padding-left: 10px;
background-color: cornflowerblue;
color: white;
cursor: default;
}
.menu {
font-size: small;
position: relative;
width: 100%;
background-color: cornflowerblue;
color: white;
}
.menu .items span {
margin-left: 10px;
}
.menu .items {
display: inline-block;
position: relative;
right: 0px;
text-align: right;
cursor: pointer;
}