I'm encountering an issue with this code that's preventing it from running properly on Google Chrome (I haven't tried other browsers). When the content displays, the regular paragraphs appear aligned to the far left instead of being centered, and there are gaps in the background around the links, making it look like I highlighted the letters in MS Word. Despite setting the padding to 0 as an attempt to fix this, nothing seems to work. What am I missing?
<html>
<head>
<link rel="stylesheet" type="text/css" href="My Chars.css">
<title>My Chars</title>
</head>
<body>
<!--Defines the general styles for the page-->
<span class = "default" style = "float:left; background-image:url('Paper Mache.jpg'); width:100%; height:100%">
<!--Empty header-->
<div id = "header" style = "height:50px; width:100%; align:top">
</div>
<br />
<!--Left links panel-->
<span class = "default" style = "width:50px; padding:0px;">
<a href = "original.html">Original Chars</a>
<br />
<a href = "updated.html">Updated Chars</a>
<br />
<a href = "blended.html">Blended Chars</a>
</span>
<br />
<!--Main body text-->
<span class = "default">
<div class = "section_head">
My character site
</div>
<span class = "default">
This site is dedicated to the various ideas I've had regarding various characters over the years. The site is divided into three main sections, based on where my input starts and stops. These divisions are:
</span>
<ul class = "default">
<li>
<div style = "font-weight:bold">
Original Characters
</div>
These are characters created "from scartch". I designed almost everything, from the name to the costume to the character's background, powers, skills, weapons, etc.
</li>
<li>
<div style = "font-weight:bold;">
Updated Characters
</div>
These are existing charactes whose backstories, skills, and/or powers have been altered to reflect the times, make a more logical or cohesive origin --especially with respect to an archenemy or to merge several versions of that character together.
</li>
<li>
<div style = "font-weight:bold;">
Blended Characters
</div>
These are two or more different characters that have similar or shared elements in terms of backstory, character themes/arcs, powers/skills/abilities, etc. that have been mixed together so that the best elements of the individual characters produce a new, better "combination character."
</li>
</ul>
<span class = "default">
In addition to these three main sections, there are subsections for heroes and villains and supporting cast. There are also divisions between "universes," e.g. DC comics universe vs a movie's universe.
</span>
<!--Closing th main body-->
</span>
<!--Closing the main page details-->
</span>
</body>
</html>
Styling in an external style sheet:
body
{
margin: 0;
}
.default
{
width: 800px;
height: 100%;
background-color: white;
margin-left: auto;
margin-right: auto;
}
.section_head
{
background-color: white;
font-size: large;
font-weight: bold;
text-align: center;
width: 800px;
margin-left:auto;
margin-right: auto;
}
a:link
{
color: red;
font-weight: bold;
padding: 0;
margin: 0;
}
View JSFiddle example - http://jsfiddle.net/L9LvS/