Fixed shifting content on page load

Fixed shifting content when going from page to page in docs.

public/_includes/_hero.jade

@@ -8,7 +8,6 @@ if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
 header(class="hero background-sky")
-  span(class="hero-title-with-badges" layout="row" layout-xs="column" layout-align="start center" layout-align-xs="start start")
   h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
   if useBadges
     span(class="badges")

public/_includes/_version-dropdown.jade

@@ -64,7 +64,7 @@ if language == 'dart'
 
 
 <!-- DROPDOWN BUTTON -->
-nav.hero-subtitle.text-subhead.dropdown
+nav.dropdown
   button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title}  <span class="icon icon-arrow-drop-down"></span>
   div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
 

public/resources/css/module/_dropdown.scss

@@ -1,6 +1,7 @@
 .dropdown {
   position: relative;
   z-index: $layer-1;
+  margin: ($unit * 2) 0 0 0;
 
   .dropdown-button {
     background: rgba($snow, .1);

public/resources/css/module/_main-nav.scss

@@ -34,8 +34,8 @@
       width: 135px;
       overflow: hidden;
       text-indent: -3000px;
-      margin-top: 0;
-      margin-bottom: 0;
+      margin:0;
+      padding: 0;
 
       @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
         background: url('/resources/images/logos/standard/logo-nav@2x.png') 0px 8px no-repeat;
@@ -111,7 +111,9 @@
     background: none;
     border-radius: 0;
     position: relative;
+    letter-spacing: 0.16px;
     margin: 0;
+    min-width: auto;
 
     &:hover {
       background: $ocean;