CSS positioning without the use of float or margin adjustments - css

Question

How can I move my UL element over the the right of the browser without using float, or 'guesstimating' that the element is flush to the right margin through the use of tools such as margin px/% etc?
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
border: 1px solid black;
}
<div class="nav">
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>

Answer 1

Depending on what browsers you need to support, you can use flexbox.
MDN - Flexible Boxes
Specifically, you want a container with display: flex; and justify-content: space-between;
Something like:
<div class="nav" style="display: inline-flex; justify-content: space-between;">
... child items here ...
</div>
Note that flexbox is only supported on IE11+ and all evergreen browsers (Chrome, Firefox, etc). IE10 has partial support.
See for more details regarding browser support.
If you need to support pre-IE10 browsers, you can try using position: absolute; and right: 0; on your ul.
Flexbox:
.nav {
display: inline-flex; //or just flex
justify-content: space-between;
}
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
border: 1px solid black;
}
Using position:
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
border: 1px solid black;
position: absolute;
right: 0;
}

Answer 2

I see from your comment on your original post that you are avoiding floats because your elements are not lining up properly.
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
float: left;
}
.nav ul {
display: inline-block;
border: 1px solid black;
float: right;
}
Lines up perfectly when you set the top margins to zero. Your elements are of different height so you need to line them up how you want using margin/padding.

Answer 3

Change the following css properties
.nav li {
display: inline;
}
.nav h1 {
background-color: red;
display: inline-block;
}
.nav ul {
display: inline-block;
float:none;
right:0;
margin-right:10px; // its just an example you can move as much as you want
border: 1px solid black;
}
<h1>Resume</h1>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>

Answer 4

Try position: absolute;, right: 0px;