Съезжает рамка меню

.menu { border-top:3px solid red;  
border-bottom:3px solid red; width:100%;display:inline-block; } 
 
.menu ul {list-style:none; text-align:center;} 
.menu li {float:left; padding:10px;}

<div class="menu"> 
<ul> 
<li>Menu 1</li> 
<li>Menu 2</li> 
<li>Menu 3</li> 
<li>Menu 4</li> 
</ul> 
   
</div>

.menu { border-top:3px solid red; border-bottom:3px solid red; } 
.menu ul {list-style:none; text-align:center; overflow:hidden;} 
.menu li {float:left; padding:10px;}

<nav class="menu"> 
  <ul> 
    <li>Menu 1</li> 
    <li>Menu 2</li> 
    <li>Menu 3</li> 
    <li>Menu 4</li> 
  </ul> 
</nav>