CSS misaligned menu items

Question

I am developing a web application and developed a menu with some icons but when decreasing the width of the page the icons are misaligned and this is my menu

but by decreasing the page width this happens with the menu components.

   <div class="header-fixed">
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 text-left">
            <a class="fa fa-home"></a>
        </div>
        <div class="col-xs-12 col-sm-4 text-center">
            <a class="fa fa-user"></a>
        </div>
        <div class="col-xs-12 col-sm-4 text-right">
             <a class="fa fa-shopping-cart"></a>
        </div>
    </div>
    </div>
  </div> 

      .header-fixed {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  display: none;
    background-color: #6495ED;
  border-bottom: 1px solid #000;
  height: 37px;
  font-size: 20pt;
  }

Answer 1

As I have explained in:

• Div bootstrap misaligned

• Side by side in Bootstrap, jumping line

• Problem Aligning Content with CSS

The sum of the cols has to be always the same to 12, however its cols-Xs are:

• col-Xs-12+col-Xs-12+col-Xs-12 (12+12+12) = 36 (wrong)
• col-Sm-4+col-Sm-4+col-Sm-4 (4+4+4) = 12 (correct)

The right thing should be:

• col-Xs-4+col-Xs-4+col-Xs-4 (4+4+4) = 12

Example:

<div class="header-fixed">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-sm-4 text-left">
                <a class="fa fa-home"></a>
            </div>
            <div class="col-xs-4 col-sm-4 text-center">
                <a class="fa fa-user"></a>
            </div>
            <div class="col-xs-4 col-sm-4 text-right">
                 <a class="fa fa-shopping-cart"></a>
            </div>
        </div>
    </div>
</div>

Although in case you don’t even need the sm, since the xs is identical, so switch to:

<div class="header-fixed">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 text-left">
                <a class="fa fa-home"></a>
            </div>
            <div class="col-xs-4 text-center">
                <a class="fa fa-user"></a>
            </div>
            <div class="col-xs-4 text-right">
                 <a class="fa fa-shopping-cart"></a>
            </div>
        </div>
    </div>
</div>