响应式html布局崩溃

Question

我需要制作响应式布局，但我的菜单会像图片一样崩溃。我需要在正确的位置制作菜单，所以在我的CSS中我添加了正确的：0px。我应该如何制作正确位置和反应灵敏的菜单。

这是正确的位置。

但是当我删除右：0px;一切正常，但我需要正确的位置。 没有正确位置的示例

 <div class="row" id="menu_section">
  <div style=" margin-top:20px" class="four columns">
    <img class="img" src="images/logo.png">
  </div>
  <div class="eight columns">

    <div id="menuSection">
      <div class="menu top">
        <div class="item">Registrati</div>
        <div class="item">Accedi</div>
        <div class="item"><img src="images/shoppingCart.png"></div>
     </div>

      <div class="menu bottom">
        <div class="item"><b>C</b>osa fare</div>
        <div class="item"><b>O</b>rdina ora</div>
        <div class="item"><b>A</b>ziende</div>
        <div class="item"><b>F</b>ilosofia</div>
        <div class="item"><b>C</b>ontatti</div>
      </div>
    </div>
  </div>
</div>
#menuSection{
  right: 0px;
  bottom:0px;
  position: absolute;
  margin-bottom: 5px;
}

#menu_section{
padding-top: 10px;
padding-bottom: 10px;
}

.menu.top{
margin-left:auto;
text-align: right;
padding-bottom:20px;
}

.menu.bottom{
margin-top:auto;
text-align: right;
}

.img{
max-width:100%; 
position: relative; 
bottom: 0; 
display:table;     
display:block;
margin:auto;"
}