title: Styling is different when included via <link> tag
body: <p>I'm having a very strange problem. Here's the HTML that I'm using:</p>
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type='text/css'&gt;
          &lt;title&gt;Site name&lt;/title&gt;
              *{
                  padding: 0px;
                  margin: 0px;
                  
                  font-family: sans-serif;
              }
              
              html{
                  background: #BED4EB;
              }
              
              body{
                  background: #FFFFFF;
                  width: 1000px;
                  margin: 0px auto;
                  padding-bottom: 25px;
              }
              
              header{
                  background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
                  
                  padding: 10px 0px;
              }
                  header h1{
                      color: #FFFFFF;
                      display: inline;
                      font-size: 2.5em;
                  }
                  header nav{
                      display: inline-block;
                      float: right;
                  }
                      header nav ul li{
                          margin: 0px 20px;
                          
                          display: inline-block;
                      }
                          header nav ul li a{
                              color: #FFFFFF;
                              
                              text-decoration: none;
                              
                              font-size: 1.4em;
                          }
                          header nav ul li a:hover{
                              color: #FFA54D;
                          }
              
              section#quick_login{
                  width: 20%;
                  float: right;
                  background: #91A9FA;
                  border: 1px solid #5D82FC;
                  margin: 0px 0px 5px 5px;
                  padding: 5px;
                  text-align: center;
              }
                  section#quick_login input{
                      padding: 3px;
                      border-radius: 3px;
                      border: 1px solid #BDBDBD;
                  }
              
              section#notices{
                  display: inline-block;
                  width: 75%;
              }
                  section#notices .alert, section#notices .notice{
                      padding: 5px;
                      display: inline-block;
                  }
                  section#notices .alert{
                      background: #FA9191;
                      border: 1px solid #FC5D5D;
                  }
                  section#notices .notice{
                      background: #91A9FA;
                      border: 1px solid #5D82FC;
                  }
                      
              section#main h2{
                  margin-top: 25px;
              }
              section#main p{
                  margin-top: 5px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header&gt;
              &lt;h1&gt;Site name&lt;/h1&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href='#'&gt;Link 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href='#'&gt;Link 2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href='#'&gt;Link 3&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href='#'&gt;Link 4&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href='#'&gt;Link 5&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          
          &lt;section id='quick_login'&gt;
              &lt;h2&gt;Quick login&lt;/h2&gt;
              &lt;form action='login.php'&gt;
                  Username: &lt;input type='text' placeholder='Your username' name='username' /&gt;
                  &lt;br /&gt;Password: &lt;input type='password' placeholder='Your password' name='password' /&gt;
                  &lt;br /&gt;&lt;input type='submit' value='Go' /&gt;
              &lt;/form&gt;
          &lt;/section&gt;
          
          &lt;section id='notices'&gt;
              &lt;p class='alert'&gt;
                  Your email address hasn't been verified; check your email for a link to verify it.
              &lt;/p&gt;
              &lt;p class='notice'&gt;
                  We received a record 553 visitors yesterday!
              &lt;/p&gt;
          &lt;/section&gt;
          
          &lt;section id='main'&gt;
              &lt;h2&gt;Subtitle 1&lt;/h2&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.&lt;/p&gt;
              
              &lt;h2&gt;Subtitle 2&lt;/h2&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.&lt;/p&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>and it displays perfectly (apart from the not vertically aligned menu which I'm working on):</p>
  <p><a href="https://i.stack.imgur.com/H10Xk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H10Xk.png" alt="correct" /></a><br />
  <sub>(source: <a href="http://gyazo.com/67f6acd6397fb4551e1852ba91836a24.png" rel="nofollow noreferrer">gyazo.com</a>)</sub></p>
  <p>but then when I replace the <code>&lt;style&gt;</code> tag with <code>&lt;link rel='stylesheet' type='text/css' href='style.css' /&gt;</code> and copy/paste everything within the <code>&lt;style&gt;</code> tags into style.css it displays like this:</p>
  <p><a href="https://i.stack.imgur.com/rBsd5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rBsd5.png" alt="why?" /></a><br />
  <sub>(source: <a href="http://gyazo.com/5cf93936ef4afa0031a5f64bbc3e8ce2.png" rel="nofollow noreferrer">gyazo.com</a>)</sub></p>
  <p>What's causing this? How do I fix it? It appears to be browser-specific, since Firefox is displaying it perfectly. Only in Chrome does it appear incorrectly.</p>