Hi there everyone,

I am designing a website on my 24" Desktop (Mac) and everything looks great when I go to preview it (I have 3 pages done so far) - there's no formatting/alignment issues when I view the site. When I view the website on my Mac laptop, there's formatting and alignment issues (not with the homepage, but with the other 2 pages, and the top menu bar with the links to pages are also not aligned with the top header logo on my laptop). Other issues include the background logos coming overtop other objects and moving closer to the center, text alignment issues, etc. I was just wondering if someone could look over my code and see if you could find the issues because I really have no idea what the problems are and how to fix them.

Here's how everything looks on my desktop (and how it should all look): http://www.flickr.com/photos/8046922...9519/lightbox/

Link to files (Images, Code, etc): http://ge.tt/225dYui/v/0

CSS Code:

Code:
html,body{width:100%;height:100%;margin:0;padding:0;}
* {margin:0; padding:0;} /* << Most important in every website */
.imageborder{border:6px solid #333;}

/*** END */

/* Navigation */

nav {position:relative; top:-1px;}
nav ul {padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/margin: 0;text-align: right; //set value to "left", "center", or "right"*/}
nav ul li{z-index:9999;letter-spacing:0;word-spacing:1px;font-family:"Arial Black";font-size:125%;color:#fff;display:inline;}
nav ul li {margin-right:10px; margin-left:10px;}

nav ul li a {
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid white; /*bottom border is 3px*/
}

nav ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}


/* Bio */
span.bio-p {width:360px; text-align:left; z-index:-1; height:100px;}
div.main-pic.bio {}
div.b-img {}
span.bio-p p {width:400px; font-size:13px;position:relative; top:105px;}
.bioHead {position:relative;top:90px; left:-50px; width:600px;display:block; background: url(../images/bio-head.png) no-repeat; height: 120px; margin:0 auto;}
.bioHead {background-size:600px 100px;}
.bioHead {}
span.bio-p a {display:inline; float:left; z-index:99999;}
.transition {position:relative; top:120px;}

/*** END */




.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.group { display: inline-block; clear: both; }
/*** END */

#container {min-height:100%;position:relative;}

/*Header Social */

a#fb{background:url(../images/fb.png) no-repeat;display:block;height:32px;width:32px;background-color:transparent;position:absolute;right:20%;top:10px;}
a#yt{background:url(../images/yt.png) no-repeat;display:block;height:32px;width:32px;background-color:transparent;position:absolute;right:17%;top:10px;}

/*** END */


/* Top Titles */
span.top {margin:0 auto;}

.top-titles h1 {font-size: 4.5em;margin: -17px 0 -3px;color: #C90;}

p.bottom {margin:0 0 0 15px;}

.top-titles { display:inline-block; margin:0 auto 0 auto;position: relative;top: -22px;font-family: "Arial Black", Gadget, sans-serif;}

/*** END */


/* Video */
.video iframe{width:600px;height:400px;margin-bottom:-5px; z-index:99; display:inline-block; }
.awards {-webkit-border-radius: 0px 0px 28px 28px;-moz-border-radius: 0px 0px 28px 28px;border-radius: 0px 0px 28px 28px;}
.awards {width:600px;height:150px;background:url(../images/awards.png)no-repeat;background-size:600px 150px;margin:0 auto 0 auto;}

.bio {position:relative; left:-105px;}

.dates {position:relative; left:-105px;top:-50px;z-index:-10;}

.datestext {position: relative; left:-315px;top:145px;z-index:1;font-family: "Arial Black", Gadget, sans-serif;}
.datestext h2 {font-size: 2em;margin: -28px 0 3px 105px;color: #000;}

.datestext1 {position: absolute; left:-150px;top:280px;z-index:1;font-family: "Arial Black", Gadget, sans-serif;}
.datestext1 h3 {font-size: 2em;margin: -10px 0 3px 822px;color: #000;}

.datestext2 {position: absolute; left:575px;top:845px;z-index:1;font-family: "Arial Black", Gadget, sans-serif;}
.datestext2 h4 {font-size: 2em;margin: 140px 0 3px -55px;color: #000;}

.video1 iframe{width:900px;height:400px;margin-bottom:-585px;margin-right:-30px;margin-left:-105px; z-index:100;display:inline-block; }

.video2 iframe{width:900px;height:400px;margin-bottom:-1150px;margin-right:-30px;margin-left:-105px; z-index:100;display:inline-block; }

/*** END */


/* Logo's */
div.top-logo{height:67px;width:57px;background:url(../images/petelogo.png)no-repeat;background-size:60px 50px;z-index:11;position:absolute;left:24%;top:0; z-index:-1;}
div.pete-right{height:500px;width:300px;background:url(../images/petelogo.png)no-repeat;background-size:300px 250px;position:absolute;right:9%;top:36%; display:block;}

div.pete-left{height:500px;width:300px;background:url(../images/petelogo.png)no-repeat;background-size:300px 250px;position:absolute;left:9%;top:36%;}

/*** END */


#main-content {width:100%;height:100%;}
#guts {width:670px; margin:0 auto 0 auto; color:#fff;}


/* Other */
#social{position:absolute;top:30px;right:20px;width:60px;height:30px;z-index:99999;}

#header{position:relative;top:11px;min-width:100%;height:50px;background-color:#C90;display:block;float:left;z-index:999;margin-bottom:50px;}
body{text-align:center;background:url(../images/background.jpg);-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;height:100%;z-index:-999;}
#main-content{margin-top: 0;z-index: 99;margin: 0 auto;}
#papercontent{width:100%;text-align:middle;font-family:Helvetica;font-size:150%;color:#fff;margin:80px auto 0;padding:0 0 120px;}

#footer, .push {height: 4em; width:100%; height:40px; background-color:#C90;}

.push{margin-top:40px;}
a:link,a:visited,.header1 a:link,.header1 a:visited,.header2 a:link,.header2 a:visited{color:#fff;text-decoration:none;}
a:hover,a:active,.header1 a:hover,.header1 a:active{color:#000;text-decoration:none;}
.header2 a:hover,.header2 a:active{color:#C90;text-decoration:none;}

#footer > p:first-child {
    float: left;
    text-align: left;
    width: 33.3%; }

#footer > p:nth-child(2) {
    float: left;
    text-align: center;
    width: 33.4%; }

#footer > p:last-child {
    float: right;
    text-align: right;
    width: 33.3%; }
	
	/* facebook */
	
.facebook{padding-left: 100px;
margin-top: -37px;}
HOMEPAGE CODE:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
	<meta name="description" content="This site shows the positive and negatives to electronic reading versus the traditional method, and the context that surrounds the emergence of new technologies - a context that matters to us" />
	<meta name="author" content="tempz">
	<meta name="keywords" content="Electronic, Reading, Print, Text, e-Book, Kindle, Impact, Effects, Libraries, Books, Bookstores, Nicholas, Carr, Bookless, Online, Memory" />
<title> Elvis Tribute Artist: Pete Paquette </title>
<!-- Pete, Paquette, Elvis -->
	<link rel="stylesheet" href="css/main.css?ver=12122012"/>
<!--[if IE]> 
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>   
	<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
	<script type='text/javascript' src='js/dynamicpage.js'></script>
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

</head>
<body>
<div id="container">
	<div id="header">
		<div class="top-logo"></div>
			<nav>
				<ul class="group">
					<li><a href="index.html">Home</a></li>
					<li><a href="bio.html">Bio</a></li>
					<li><a href="dates.html">Tour Dates</a></li>
					<li><a href="#">Multimedia</a></li>
					<li><a href="#">Sign Up</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>	
			</nav>
			<a id="yt" href="youtubehere"></a>
			<a id="fb" href="fbhere"></a>
		</div>
	<div id="page-wrap">
		<div class="pete-left"></div>
	<div id="main-content">
		<div id="guts">
			<div class="top-titles">
				<span class="top">ELVIS TRIBUTE ARTIST</span>
				<h1>PETE PAQUETTE</h1>
				<p class="bottom">Canada's top Elvis Tribute Artist and recipient of numerous awards</p>
			</div>	
			<div class="video">	
				<iframe width="900" height="500" src="http://www.youtube.com/embed/XWqBRTKNhGM?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>
			</div>
			<div class="awards">
				
        </div>
			<div class="facebook">
				<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/The-Official-Pete-Paquette-Fan-Club/263124813762333?fref=ts"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px; color:#fff"></iframe>


			</div>
		</div>

	</div> 
		<div class="pete-right"></div>
</div>
	<div class="push"></div>
	<div id="footer">
			<p>First section, first line of text<br /> Second line of text</p>
			<p>Second section, first line of text<br /> Second line of text</p>
			<p>Third section, first line of text<br /> Second line of text</p>
	</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->
BIO PAGE CODE:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
	<meta name="description" content="This site shows the positive and negatives to electronic reading versus the traditional method, and the context that surrounds the emergence of new technologies - a context that matters to us" />
	<meta name="author" content="tempz">
	<meta name="keywords" content="Electronic, Reading, Print, Text, e-Book, Kindle, Impact, Effects, Libraries, Books, Bookstores, Nicholas, Carr, Bookless, Online, Memory" />
<title> Elvis Tribute Artist: Pete Paquette </title>
<!-- Pete, Paquette, Elvis -->
	<link rel="stylesheet" href="css/main.css?ver=12122012"/>
<!--[if IE]> 
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>   
	<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
	<script type='text/javascript' src='js/dynamicpage.js'></script>
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

</head>
<body>
<div id="container">
	<div id="header">
		<div class="top-logo"></div>
			<nav>
				<ul class="group">
					<li><a href="index.html">Home</a></li>
					<li><a href="bio.html">Bio</a></li>
					<li><a href="dates.html">Tour Dates</a></li>
					<li><a href="#">Multimedia</a></li>
					<li><a href="#">Sign Up</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>	
			</nav>
			<a id="yt" href="youtubehere"></a>
			<a id="fb" href="fbhere"></a>
		</div>
	<div id="page-wrap">
		<div class="pete-left"></div>
	<div id="main-content">
		<div id="guts">
			<div class="top-titles">
				<span class="top">ELVIS TRIBUTE ARTIST</span>
				<h1>PETE PAQUETTE</h1>
				<p class="bottom">One of Canada's top Elvis Tribute Artists and recipient of numerous awards</p>
			</div>	
			<div class="bio">	
				<img src="images/petebio.png" alt="Pete Bio">
			</div>
				<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FThe-Official-Pete-Paquette-Fan-Club%2F263124813762333&amp;send=false&amp;layout=standard&amp;width=500&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35" scrolling="no" frameborder="0" style="bottom: 119px;color: white;border: none;overflow: hidden;width: 500px;height: 35px;position: absolute;margin: 0 auto;margin-left: -10em;" allowTransparency="true"></iframe>
		</div>

	</div> 
		<div class="pete-right"></div>
</div>
	<div class="push"></div>
	<div id="footer">
			<p>First section, first line of text<br /> Second line of text</p>
			<p>Second section, first line of text<br /> Second line of text</p>
			<p>Third section, first line of text<br /> Second line of text</p>
	</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->
DATES PAGE CODE:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
	<meta name="description" content="This site shows the positive and negatives to electronic reading versus the traditional method, and the context that surrounds the emergence of new technologies - a context that matters to us" />
	<meta name="author" content="tempz">
	<meta name="keywords" content="Electronic, Reading, Print, Text, e-Book, Kindle, Impact, Effects, Libraries, Books, Bookstores, Nicholas, Carr, Bookless, Online, Memory" />
<title> Elvis Tribute Artist: Pete Paquette </title>
<!-- Pete, Paquette, Elvis -->
	<link rel="stylesheet" href="css/main.css?ver=12122012"/>
<!--[if IE]> 
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>   
	<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
	<script type='text/javascript' src='js/dynamicpage.js'></script>
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

</head>
<body>
<div id="container">
	<div id="header">
		<div class="top-logo"></div>
			<nav>
				<ul class="group">
					<li><a href="index.html">Home</a></li>
					<li><a href="bio.html">Bio</a></li>
					<li><a href="dates.html">Tour Dates</a></li>
					<li><a href="#">Multimedia</a></li>
					<li><a href="#">Sign Up</a></li>
					<li><a href="#">Contact Us</a></li>
				</ul>	
			</nav>
			<a id="yt" href="youtubehere"></a>
			<a id="fb" href="fbhere"></a>
		</div>
	<div id="page-wrap">
		<div class="pete-left"></div>
	<div id="main-content">
		<div id="guts">
			<div class="top-titles">
				<span class="top">ELVIS TRIBUTE ARTIST</span>
				<h1>PETE PAQUETTE</h1>
				<p class="bottom">One of Canada's top Elvis Tribute Artists and recipient of numerous awards</p>
			</div>	

				<div class="video1">	
				<iframe width="900" height="500" src="http://www.youtube.com/embed/XWqBRTKNhGM?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>

				<div class="video2">	
				<iframe width="900" height="500" src="http://www.youtube.com/embed/Hjnsiol-fKM" frameborder="0" allowfullscreen></iframe>
			</div>

<div class="datestext">
<h2>Always On My Mind</h2>
</div>

<div class="datestext1">
<h3>Pete Paquette Videos and Photos</h3>
</div>

<div class="datestext2">
<h4>I Can't Stop Loving You</h4>
</div>

			<div class="dates">	
				<img src="images/datesback.png" alt="Tour Dates">
			</div>
				<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FThe-Official-Pete-Paquette-Fan-Club%2F263124813762333&amp;send=false&amp;layout=standard&amp;width=500&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35" scrolling="no" frameborder="0" style="bottom: 119px;color: white;border: none;overflow: hidden;width: 500px;height: 35px;position: absolute;margin: 0 auto;margin-left: -10em;" allowTransparency="true"></iframe>
		</div>

	</div> 
		<div class="pete-right"></div>
</div>

<div class="push"></div>
	<div id="footer">
			<p>First section, first line of text<br /> Second line of text</p>
			<p>Second section, first line of text<br /> Second line of text</p>
			<p>Third section, first line of text<br /> Second line of text</p>
	</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->