Выравнивание социальных значков рядом с кнопкой подписки

Question

Я написал код для своего сайта, по какой-то причине я не могу выровнять социальные значки рядом с кнопкой отправки.

Как выровнять социальные значки рядом с кнопкой отправки?

Вот мой код:

HTML:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 

<div class="page"> 

<label style="font-weight:normal;" "margin-bottom: 0px;">Registrer deg for nyheter og  spesialtilbud:</label> 
<form action="//futuratech.us9.list-manage.com/subscribe/post? u=b867ca7c1f3791cf2ebff6f75&amp;id=3eb1230909"> 
<input type="email" id="email" placeholder="Din E-postadresse" /> 
<input type="submit" id="submit" value="Registrer" /> 
</form> 

</div> 

<div class="socialIcons"> 
    <ul> 
    <li><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li> 
    <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li> 
    <li><a href="#" class="google"><i class="fa fa-google-plus"></i></a></li> 
    <li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li> 
    <li><a href="#" class="pinterest"><i class="fa fa-pinterest-square"></i></a></li> 
    <li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li> 
</ul> 
</div> 

CSS:

  #email {padding: 5px 0px 5px 10px; width: 20%; } 
    #submit { margin-left: 10px; margin-top: 18px; padding: 8px 0px 8px 0px; width: 7%; border-radius: 0px; } 

    .socialIcons { 
     font-size: 24px; 
     li { 
     display: inline-block; 
     float: left; 
     text-align: center; 
     line-height: 40px; 
     a { 
      color: #000; 
      display: block; 
      width: 40px; 
      height: 40px; 
      &:hover { 
      color: #fff; 
      } 
      &.fb:hover { 
      background: #3c599f; 
      } 
      &.twitter:hover { 
      background: #00aced; 
      } 
      &.google:hover { 
      background: #d85131; 
      } 
      &.linkedin:hover { 
      background: #017eb4; 
      } 
      &.pinterest:hover { 
      background: #d20003; 
      } 
      &.youtube:hover { 
      background: #c8312b; 
      } 
     } 
     } 
    } 

Вот код в прямом эфире: http://codepen.io/Conscious/pen/vnhpf

Answer 1

После возиться с position и box-sizing, Я нашел решение, которое может работать вы: http://codepen.io/Xoqes/pen/uJLtA?editors=110