Material Design Lite - Suchleiste in Nav-Header

Question

Ok, das Problem ist, dass, wenn ich diese laden - https://codepen.io/russellharrower/pen/aZmJya Sie werden feststellen, dass die rechte Seite nicht das gleiche wie die linke Seite ist. Ich frage mich, wie ich das bitte korrigieren würde.

Ich brauche die richtige Polsterung, um wie die linke zu sein.

 <div class="mdl-layout__header-row"> 
      <!-- Title --> 
      <span class="mdl-layout-title">IPET</span></span> 
      <!-- Add spacer, to align navigation to the right --> 
      <div class="mdl-layout-spacer"></div> 
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> 
       <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> 
        <i class="material-icons">search</i> 
       </label> 
       <div class="mdl-textfield__expandable-holder"> 
        <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /> 
       </div> 

     <button id="demo-menu-lower-right" 
       class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> 
      <i class="material-icons">chat</i> 
     </button> 
     <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" 
      for="demo-menu-lower-right"> 
      <li class="mdl-menu__item">Some Action</li> 
      <li class="mdl-menu__item">Another Action</li> 
      <li disabled class="mdl-menu__item">Disabled Action</li> 
      <li class="mdl-menu__item">Yet Another Action</li> 
     </ul> 
      </div> 

     </div> 

    </header> 

Answer 1

Okay, sieht aus wie es die Aktualisierung das Styling auf dem .mdl-layout__header-row Element so einfach sein sollte. Wie folgt:

.mdl-layout__header-row { 
    padding: 0 80px 0 80px; 
} 

Passen Sie die Polsterung nach Bedarf an. Bearbeitet, wie ich falsch gelesen habe und das gelassene selbe als recht und nicht umgekehrt gemacht hat. Hier ist ein Codepen aktualisiert:

https://codepen.io/thecox/pen/ezdveV