title: CSS style changes on window resize
body: <p>I dont know why the size of the header and footer changes on window resize. On debugging / rewriting the code, I found that on adding the <code>Setting</code>(css:setting-dropdown) or <code>Logout</code> (css:logout-button) div, the CSS breaks. I have tried to fix it but I am unable to figure out the reason why the settings and logout buttons display outside the header width and why the width of header and footer increases on adding those 2 divs.</p>
  
  <p>Thanks for the help </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html { 
    background: url("backlines.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  body {
      height: 850px;
  }
  
  .averios-header {
   position: absolute;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0.1, rgb(254, 254, 254)),color-stop(1, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
   left: 1px;
   top: 0px;
   margin: 0 auto;
   width: 100%;
   /*overflow: auto;*/
   box-shadow: 0px 2px;
  }
  
  div#averios-logo{
   width: 300px;
   margin-left:270px;
  }
  
  div#loginHeader {
   font-family:'Museo Slab 700';
      margin-top: 360px;
      margin-left: 276px;
      font-size: 26px;
      color: rgba(0, 173, 239, 1);
  }
  
  div#underLoginHeader {
      margin-top: 50px;
      margin-left: 278px;
      font-size: 25px;
   font-family: sans-serif;
  }
  .averios-footer {
      position: absolute;
      background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,color-stop(0, rgb(226, 226, 226)),color-stop(0, rgb(254, 254, 254)),color-stop(0, rgb(254, 254, 254)),color-stop(0, rgb(254, 254, 254)),color-stop(0.176, rgb(254, 254, 254)),color-stop(0.904, rgb(219, 219, 219)),color-stop(1, rgb(209, 209, 209)));
      margin-top: 812px;
      width: 100%;
      height: 65px;
      margin-left: -7px;
      overflow: auto;
  }
  /*div#header-hr {
   position: absolute;
   background: rgba(0, 173, 239, 1);
   height: 6px;
   width: 100%;
  }*/
  
  div#footer-hr {
   position: absolute;
   background: rgba(0, 173, 239, 1);
   height: 6px;
   width: 100%;
  }
  
  div#footer-text {
      font-family: sans-serif;
      font-size: 19px;
      margin-top: 25px;
      margin-left: 280px;
   color: rgb(127,130,134);
  }
  
  div#forgot-password-link {
      margin-top: 90px;
      font-size: 23px;
      text-decoration: none;
  }
  
  a {
      color: rgb(127,130,134);
  }
  
  div#welcome-text {
      margin-left: 276px;
      font-family: 'Museo Slab 300';
      font-size: 22px;
  }
  
  div#welcome-text p {
      margin: 5px auto;
  }
  
  div#dropdown-pulse #dropbutton {
      padding: 16px;
      margin-top: 0;
      margin-right: auto;
      margin-left: 276px;
      margin-bottom: 0;
      border-radius: 50px 50px 50px 50px;
      background: rgba(0, 173, 239, 1);
      color: white;
      width: 230px;
      border: none;
      font-size: 16px;
      position: relative;
      top: 100px;
      text-align: left;
  }
  
  img#arrow {
      position: relative;
      top: 110px;
      right: 84px;
  }
  
  img#sphere {
      position: relative;
      top: 116px;
      right: 51px;
  }
  
  /* SETTING DROPDOWN */
  
  div#setting-dropdown {
      position: absolute;
      margin-left: 1350px;
   height: 0px;
   display: inline-block;
  }
  
  
  div#setting-dropdown-content {
      display: none;
      background: rgba(0, 173, 239, 1);
      width: 237px;
      /* padding: 8px; */
      position: absolute;
      margin-left: -116px;
      margin-top: -22px;
      padding: 15px;
  }
  div#setting-dropdown p {
      font-size: 22px;
      margin-top: 44px;
      font-family: 'Museo Slab 700';
  }
  
  img#setting-blue-arrow {
      position: relative;
      margin-left: 121px;
      top: -44px;
  }
  
  div#setting-dropdown-content a {
      color: white;
      text-decoration: none;
      /* display: none; */
      font-size: 19px;
      font-family: 'Museo Slab 300';
      padding: 2px;
  }
  
  #setting-dropdown:hover #setting-dropdown-content {
   display:block;
  }
  
  /* SOMETHING NEW */
  
  div#setting-dropdown i {
      display: inline-block;
      padding: 5px;
      padding-right: 7px;
      text-align: center;
      border-radius: 10px 10px 0 0;
      padding-bottom: 10px;
  }
  
  div#setting-dropdown:hover i {
      background-color: rgba(0, 173, 239, 1);
   color:white;
  }
  
  div#logout-button {
      position: absolute;
      margin-left: 1569px;
      margin-top: -90px;
      border-style: none;
  }
  
  button#averios-logout {
      background : rgba(255, 255, 255, 1);
      border: none;
      border-radius: 40px 40px 40px 40px;
      width: 135px;
      height: 40px;
      font-size: 19px;
      font-weight: 900;
      font-family: 'Museo Slab 700';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;title&lt;/title&gt;
   &lt;link rel="stylesheet" type="text/css" href="averios.css"&gt;
   &lt;link rel="stylesheet" type="text/css" href="font-awesome.css"&gt;
   &lt;link rel="stylesheet" type="text/css" href="dropdown.css"&gt;
   &lt;link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /&gt;
   
  &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="averios-header"&gt;
   &lt;div id="setting-dropdown"&gt;
    &lt;!-- SETTING DROPDOWN WILL GO HERE --&gt;
    &lt;p&gt; SETTINGS &lt;i class="ion-chevron-down"&gt;&lt;/i&gt;&lt;/p&gt;
    &lt;div id="setting-dropdown-content"&gt;
     &lt;a href="#"&gt;Change Password&lt;/a&gt;
     &lt;a href="#"&gt;Change Security Settings&lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div id="averios-logo"&gt;
    &lt;img src="averioslogo.png" width="176" height="129"&gt;
   &lt;/div&gt;
   &lt;div id="logout-button"&gt;
    &lt;button id="averios-logout"&gt; LOGOUT &lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;footer class="averios-footer"&gt;
  &lt;div id="footer-hr"&gt;
  &lt;/div&gt;
   &lt;div id="footer-text"&gt;
    &amp;copy; 2016, All Rights Reserved.
   &lt;/div&gt;
  &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>