I am very new to HTML and CSS and I created a site but it will only work right in my native resolution (1920x1080) and only when maximized.

I can paste my HTML/CSS and I was curious if anyone can tell me where I am going wrong? Be kind as I know my stuff is probably a mess and I am open to any help outside of my original question.
Code:
<!DOCTYPE html>
<html>
	<head>
		<title>Michael Smith's - Intro</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">	
	</head>
	
	<body>
	<div id="page">
	<div id="biography" title="My Biography" style="font-family: Arial; color: #330099; font-size: 12pt;">
		<h1><u>Michael Smith's Biography</u></h1>
		<img src="images/viking.png" alt="Viking Warrior">
	</div>
	<div id="parents" title="My Parents" style="font-family: Arial; color: #330099; font-size: 12pt;">	
		<h2><u>A Little Bit About Myself</u></h2>
		<p>Random typing I am just trying to create a lame bio for myself so something can be here. None of this stuff I am writing here makes sense so pleas
                 ignore all of this gibberish. Here is more blah blah blah blah blah blah blah blah blah blah blah blah</p>
		<p>My father is 58 years old and has <span style="color:yellow">yellow</span> hair and <span style="color:gray">gray</span> eyes.
		My mother is 53 years old and has <span style="color:brown">brown</span> hair and <span style="color:blue">blue</span> eyes.</p>
	</div>
	<div id="interests" title="My Interests" style="font-family: Comic Sans; color: #330099; font-size: 12pt; overflow:hidden;">
		<img src="images/fish.png" alt="Fish Picture" style="float:right;"/>
		<h3><u>Some of My Interests & Achievements</u></h3>
		<p><a href="football/vikings.html">Minnesota Vikings</a></p>
		<p><a href="outdoors/fishing.html">Fishing</a></p>
		<p><a href="technology/certification.html">My Certifications</a></p>
	</div>
	</div>
	</body>
</html>
Here is my CSS...
Code:
body {
					background-color: #ccccff;
					color: #330099;
					margin-left: 30%;
					margin-right: 30%;
					border-color: #330099;
					padding: 20px 20px 20px 20px;
					font-family: Helvetica;
					
			}
			
	#interests
	{
			border: 4px solid black;
			border-color: #330099;
			position: absolute;
			margin-left: 30px;
			margin-right: 30px;
			left:28%;
			top: 26%;
			bottom: 40%;
			right: 29%;
			left: 33%;
			padding: 20px 20px 20px 20px;
		}
		#parents
	{
			border: 4px solid black;
			border-color: #330099;
			position: absolute;
			margin-left: 30px;
			margin-right: 30px;
			top: 0%;
			bottom: 75%;
			right: 30%;
			left: 33%;
			padding: 20px 20px 20px 20px;
		}
		#biography
	{
			border: 4px solid black;
			border-color: #330099;
			position: absolute;
			margin-left: 30px;
			margin-right: 30px;
			top: 0%;
			bottom: 40%;
			right: 64%;
			left: -1%;
			padding: 20px 20px 20px 20px;
		}
	{
					#interests a:link {
						color: #007e7e;
			)
			}
			
					#interests a:visited {
						color: #333333;
			)
			}
			
					#interests a:hover {
						background: #f88396;
						color: #0d5353;
			}