Justify menu with css - html

Question

Im working on menu, which is text justified. To make this working, I add an new line. the problem is that it should be zero pixels. However, it's breaking layout
JS fiddle to see it in work
https://jsfiddle.net/z1qsL739/1/
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some </li>
<li>some</li>
<div class="justify-fix"></div>
</ul>
</div>
Css
.registration-menu{
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list{
list-style: none;
display: inline-block;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
.justify-fix{
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li{
display: inline-block;
line-height: 1em;
font-size: 18px;
&.active{
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a{
padding: 10px;
display: inline-block;
}
&:hover{
#include transition(all .4s ease);
background: #fde8be;
}
}
}

Answer 1

Try by adding the following rules, height: 46px; to the .registration-menu and padding: 4px 0; to the .reg-menu-list
.registration-menu {
background: white none repeat scroll 0 0;
border-bottom: 4px solid green;
border-top: 4px solid green;
height: 46px;
}
.reg-menu-list {
color: green;
display: inline-block;
font-size: 0;
line-height: 0;
list-style: outside none none;
padding: 4px 0;
text-align: justify;
width: 100%;
}

Answer 2

A div is not allowed inside a list as a direct child. A modern and straightforward way to go is using flexbox positioning, e.g.
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
Example: http://codepen.io/anon/pen/dpbWJk?editors=0100

Answer 3

You don't need the div at all, use a pseudo-element
.registration-menu {
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list {
list-style: none;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
}
.reg-menu-list::after {
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li {
display: inline-block;
line-height: 1em;
font-size: 18px;
background: pink;
}
li.active {
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a {
padding: 10px;
display: inline-block;
}
a:hover {
#include transition(all .4s ease);
background: #fde8be;
}
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
</ul>
</div>

Answer 4

remove display: inline-block from .reg-menu-list