Problem z RWD - wysokość

Cześć.

Mam pewien problem. Jestem w trakcie tworzenia szablonu dostosowanego pod RWD. Lecz posiadam pewien problem. Otóż ikonka z prawej strony nie ma wysokości do ostatniego elementu z lewej strony.

HTML:

<section id="top-bar-rwd">
<section class="scale">
<section class="left">
<ul>
<li class="item">
<a href="#">
<i class="fa fa-sign-in" aria-hidden="true"></i> Logowanie
</a>
</li>

<li class="item">
<a href="#">
<i class="fa fa-user-plus" aria-hidden="true"></i> Rejestracja
</a>
</li>
</ul>
</section>

<section class="right">
<ul>
<li>
<a href="javascript:void(0);" onclick="show_element('display', '#top-bar-rwd .left')">
<i class="fa fa-arrows" aria-hidden="true"></i>
</a>
</li>
</ul>
</section>
</section>
</section>

CSS:

@media all and (min-width: 768px) {
#top-bar-rwd {
}

#top-bar-rwd .left {
/* Width */
width: 90%;

/* Float */
float: left;
}

#top-bar-rwd .right {
/* Width */
width: 10%;

/* Float */
float: right;
}

#top-bar-rwd .left ul, #top-bar-rwd .right ul {
/* List */
list-style: none;
}

#top-bar-rwd .left ul li a, #top-bar-rwd .right ul li a {
/* Color */
color: #FFFFFF;

/* Font */
font-size: 16px;
font-family: 'Roboto', sans-serif;

/* Padding */
padding: 10px 15px 10px 15px;

/* Display */
display: block;

/* Background */
background: #000000;
}
}

Obrazek:


Proszę o pomoc !

Wrzuć forum na jakiś darmowy hosting, bo inaczej ciężko pomóc.