I've encountered a strange issue. Here's the HTML I'm currently using:
<!DOCTYPE HTML>
<html>
<head>
<style type='text/css'>
<title>Site name</title>
*{
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;
}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
<li>
<a href='#'>Link 4</a>
</li>
<li>
<a href='#'>Link 5</a>
</li>
</ul>
</nav>
</header>
<section id='quick_login'>
<h2>Quick login</h2>
<form action='login.php'>
Username: <input type='text' placeholder='Your username' name='username' />
<br />Password: <input type='password' placeholder='Your password' name='password' />
<br /><input type='submit' value='Go' />
</form>
</section>
<section id='notices'>
<p class='alert'>
Your email address hasn't been verified; check your email for a link to verify it.
</p>
<p class='notice'>
We received a record 553 visitors yesterday!
</p>
</section>
<section id='main'>
<h2>Subtitle 1</h2>
<p>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.</p>
<h2>Subtitle 2</h2>
<p>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.</p>
</section>
</body>
</html>
It appears properly when directly written in, except for the menu alignment issue that I am addressing:
https://i.sstatic.net/H10Xk.png
(source: gyazo.com)
However, once I switch the content of the <style> tag with
<link rel='stylesheet' type='text/css' href='style.css' /><style> tags to style.css, the display changes to this:
https://i.sstatic.net/rBsd5.png
(source: gyazo.com)
Why is this happening? How can I resolve it? It seems to be browser-specific since Firefox shows it correctly, while Chrome displays it incorrectly.