Internal & External CSS not producing same result

1

Here I have a CSS & Html file. Originally they were one page, decided to split them and make css external. Now the head of the page is not displaying correctly, it displays correctly when the css in internal not external. Here is my code. Everything else works its weird my topbanner class is not working.

HTML FILE:

<!DOCTYPE html>
<html>
<head>

	<link rel="stylesheet" href="style.css">
	<title>practice.Com</title>

</head>
<body>
		<div class="topbanner">
			<h1 >
				<a href="#3"class="hrefcolor">〚About Me〛</a> 
				<a href="#" class="hrefcolor">〚Job History〛</a>
				<a href="#" class="hrefcolor">〚Reccomendations〛</a>
				<a href="#" class="hrefcolor">〚Projects〛</a>
				<a href="#" class="hrefcolor">〚Resume〛</a>
			</h1> 
		</div>

		<div class="box1">
			<p>sadfsdf</p>
		</div>

		<div class="box2">
			<p>sadfsdf</p>
		</div>

</body>
</html>

CSS FILE:

	<style>
		.topbanner {
			width: 1320px;
			background-color: #a5cfed;
			color: #fff;
			padding: 5px;
			margin-top: 10px;
			border-style: solid;
			border-color: #7db9e5;
			border-width: 5px;
			text-align: center;
		}

		body {
			background-color: #0077cc;
		}

		.hrefcolor{
			text-decoration: none;
			color: blue;
		}

		.box1 {
			border-style: solid; 
			border-width: 6px;
			border-color: #7db9e5;
			float: left;
 			width: 660px;
 			height: 640px;
			margin-top: 20px;
			margin-left: 80px;
			padding: 5px;
			background-color: #a5cfed;
		}

		.box2 {
			border-style: solid; 
			border-width: 6px;
			border-color: #7db9e5;
			float: right;
 			width: 660px;
 			height: 640px;
			margin-top: 20px;
			margin-right: 80px;
			padding: 5px;
			background-color: #a5cfed;
		}
	</style>
2

I messed around a little and I remade the code renamed it from top banner to box5. I then made a box4 same exact code on both. Problem box4 is working but box5 is not…it seems to be code at the top not working…

	<style>
		.box5 {
			width: 1320px;
			background-color: #a5cfed;
			color: #fff;
			padding: 5px;
			margin-top: 10px;
			border-style: solid;
			border-color: #7db9e5;
			border-width: 5px;
			text-align: center;
		}

		.box4 {
			width: 1320px;
			background-color: #a5cfed;
			color: #fff;
			padding: 5px;
			margin-top: 10px;
			border-style: solid;
			border-color: #7db9e5;
			border-width: 5px;
			text-align: center;
		}
3

If the CSS is in a separate file, remove the <style> tags.

4