javascript - fa icons pushing the elements away -

i trying create navigation menu tabs. however, tabs under tabs "fa icons" kinda taking space , other elements shifted right or below (if there third line).

how can avoid pushing?

it looks this:

http://jsfiddle.net/63peh71b/1/

.slider {      position: fixed;      top: 168px;      background-color: white;      left: 48px;      right: 48px;      z-index: 3;      padding-top: 6px;  }    .nav-tabs {      border-bottom: 1px solid #c4c4c4;  }    .nav {      padding-left: 0;      margin-bottom: 0;      list-style: none;  }    ol, ul {      margin-top: 0;      margin-bottom: 10px;  }    * {      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box;  }    ul, menu, dir {      display: block;      list-style-type: disc;      -webkit-margin-before: 1em;      -webkit-margin-after: 1em;      -webkit-margin-start: 0px;      -webkit-margin-end: 0px;      -webkit-padding-start: 40px;  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>    <ul class="nav nav-tabs slider">  <li id="id1" class=""><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> tab1</a></li>  <li id="id2"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> tab2</a></li>  <li id="id3"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> tab 3</a></li>  <li id="id4"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> tab 4</a></li>  <li id="id5"><a href="javascript:;"><i class="fa fa-warning" style="color: rgb(255, 0, 0);"></i> tab 5</a></li>  <li id="id6"><a href="javascript:;">tab 6</a></li>  <li id="id7"><a href="javascript:;">tab 7</a></li>  <li id="id8"><a href="javascript:;">tab 8</a></li>  <li id="id9"><a href="javascript:;">adsadsadsad tab 9</a></li>  <li id="id10" class="active"><a href="javascript:;">tab 10</a></li>  <li id="id11"><a href="javascript:;">tab 11</a></li>  <li id="id12"><a href="javascript:;">tab 12</a></li>  <li id="id13"><a href="javascript:;">tab 13</a></li>  <li id="id14"><a href="javascript:;">tab14</a></li>  </ul>

try this:

header{ position:relative; } #yournaviconstab { li {     list-style: none;     display: inline-block;     padding:3px;     float:right;     color:@brand-primary;     position:absolute;     right:0px;     top:0px;   }  } 

you might need adjust top , right values.