Navbar align part right part left errors - html

Question

I'm trying to create a navbar with some items on the left and some items on the right (Item 1 on the left, items 2 and 3 on the right). My JSFiddle has my current code.
What I have tried to fix this issue:
float: right
text-align:right
None of them seem to work. I'm sure there is a super simple solution, but I just can't think of it.
HTML:
<div class="navbar">
<!--Create the button home -->
<p class="innav">Num1</p>
<p class="HL">|</p>
<p class="rightIn">Num2</p>
<p class="HL">|</p>
<p class="rightIn">NUM 3</p>
<p class="HL">|</p>
</div>
CSS:
div.navbar{
width:100%;
height: 30px;
background-color: #03572c;
}
p{
display: inline;
}
p.innav{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
p.rightIn{
color:white;
font-size: 24px;
width: 30px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
.HL{
margin-left: 10px;
color:white;
font-size:24px;
}
JSfiddle
Any help would be greatly appreciated! :)

Answer 1

Add these style to your css.
p.rightIn,
p:nth-child(4),
p:nth-child(6)
{
float: right;
margin: 0px 5px;
width: auto;
}
Jsfiddle

Answer 2

I would recommend that you use a CSS grid system for this, since you are likely to need this functionality over a over on your sites.
Here are some grid systems that I have used in the past:
Pure CSS
http://purecss.io/grids/
Foundation
http://foundation.zurb.com/docs/components/grid.html
Bootstrap
http://getbootstrap.com/css/#grid
Semantic UI
http://semantic-ui.com/collections/grid.html
Or, if you feel like creating your own grid system, here is a good article about it:
http://www.sitepoint.com/understanding-css-grid-systems/

Answer 3

nav {
background: #000000;
width: 100%;
display: block;
padding: 8px 0;
font-family: arial;
font-size: 13px;
}
nav span {
display:block;
width:100%;
line-height: normal;
text-align:right;
}
nav a {
color: #ffffff;
padding: 0 10px;
text-decoration: none;
display:inline-block;
border-right:1px solid #ffffff;
}
nav a:first-child{
float:left;
}
nav a:last-child{
border:none;
}
<nav>
<span>
Link 1
Link 2
Link 3
</span>
</nav>
Demo