After reviewing this fiddle, I'm struggling to get my menu aligned correctly at the right edge of the overall "card". Despite trying various methods like margins, right: 0, and float, nothing seems to work as expected. In some cases, I even end up losing the background color of the parent div (as with the float method which collapses the parent div).
Below is the current HTML and CSS from 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;
}