How to change this div inheritance

HTML & CSS
1

Hi all,

How can i stop this div inheriting its parent style, it is the .sidepara h2 style which is inheriting from the Content h2 div . In the Content h2 style i have text-align:center; which is what i want from the first h2 tag but in the .sidepara div i want to text-align:left which i can’t seem to get it to overwrite. Can someone please explain what i am doing wrong.

Here is the code:

<!doctype html>
<html lang="en">
<head>
<title></title>
<style type="text/css">

body {
	margin:0;
	padding:0;
	background-image: url("images/body_bg.png");
}

#wrapper {
	width:960px;
	margin:0 auto;
	padding:0;
	background-color:#fff;
	border-left: 4px solid #fff;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	border-bottom: 2px solid #000;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, div, img, a {
	margin:0;
	padding:0;
}

#header {
	position:relative;
	width:960px;
	height:238px;
	background-image: url("images/header_bg.png");
	border-bottom:4px solid #fff;
}

#header h2{
	position:absolute;
	font-family:book antiqua,palatino;
	color:#fff;
	left:15px;
	bottom:40px;
	margin:0;
	padding:0;
}

#header ul {
	position:absolute;
	bottom:5px;
	list-style-type:none;
	margin:0;
	padding:0;
}

#header li {
	display:inline;
}

#header a {
	text-decoration:none;
	color:#fff;
	font-size:1.5em;
	margin-left:35px;
}

#content {
	position:relative;
	width:960px
	background-color: #fff;
}

#content img {
	-moz-box-shadow: 2px 2px 2px #888;
	-webkit-box-shadow: 2px 2px 2px #888;
	box-shadow: 2px 2px 2px #888;
}

#content h2 {
	text-decoration: underline;
	text-align:center;
	padding:15px 20px 0 20px;
}

#content p {
	font-size:1.2em;
	margin:20px 20px;
}

#img1 {
	float:left;
	margin-left:20px;
	-webkit-box-shadow:3px 3px 3px #333;
	   -moz-box-shadow:3px 3px 3px #333;
	        box-shadow:3px 3px 3px #333;
	margin-bottom:20px;
}

#img2 {
	float:left;
	margin-left: 40px;
	margin-bottom:20px;
}

#img3 {
	float:left;
	margin-left: 40px;
	margin-bottom:20px;
}

#img4 {
	float:left;
	margin:40px 0 20px 40px;
}

#img5 {
	float:left;
	margin:40px 0 20px 40px;
}

.sidepara {
	margin:0;
	padding:0;
	font-size:12px;
	position:absolute;
	top:740px;
	left:590px;
	text-align:left;
}

.sidepara h2 {
	text-align:left;
}
.sidepara p {
	font-size:8px;
}



</style>
</head>
<body>
	<div id="wrapper">
		<div id="header">			
			<h2>TEL: 01522 537469</h2>
			
			<ul>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Home</a></li>
			<li><a href="#">Rooms</a></li>
			<li><a href="#">Information</a></li>
			<li><a href="#">Lincoln Guide</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Guest book</a></li>
			</ul>
		
		</div>
		
		<div id="content">
			<img src="images/image4.jpg" alt="image4.jpg">
			<h2><em>WELCOME TO CATHEDRAL VIEW GUEST HOUSE,LINCOLN BED AND BREAKFAST</em></h2>
			<p><em>Welcome to Cathedral View Guest House, nestling in the shelter of Lincoln Cathedral and situated in the heart of the famous <strong>Cathedral Quarter of Lincoln.</strong> We are located within the Bailgate area, home to the largest independent retail shopping area in the East Midlands and home to some of the county's most outstanding restaurants and bars. If you are looking for a <strong>guest house or bed and breakfast in Lincoln</strong>, come and have a look at our unique rooms, and stay in our beautiful, historic guesthouse.</em></p>
			
			<img id="img1" src="images/outside_building.png" alt="outside_building.png">
			<img id="img2" src="images/dining_set3.png" alt="dining_set3.png">
			<img id="img3" src="images/front5.jpg" alt="front5.jpg">
			<img id="img4" src="images/breakfast_menupic4.png" alt="breakfast_menupic4.png">
			<img id="img5" src="images/breakfast_menupic4.png" alt="breakfast_menupic4.png">
			<div class="sidepara">
			<h2>Our breakfast menu</h2>
			<p><em>Relax in the warmth of a log burning fire while we serve you our breakfast in our cosy ground floor breakfast room.</em></p>
			</div>
			<div class="spacer" style="clear: both;"></div>
			
		</div>
	</div>
</body>
</html>
2

You will probably want to wrap your main content is another container before you are done, and then apply the heading centering rule to that. However, with your current setup, you can do this:

#content .sidepara h2 {
	text-align:left;
}
3

Thanks very much Ralph.m very helpful. Could you just explain about wrapping the main content a bit more please.

4

It depends on what you want, but if you are aiming for left and right columns in your content area, they you are better off with a structure like this:

<div id="content">
    <div class="main">
        <h2>WELCOME TO CATHEDRAL VIEW GUEST HOUSE</h2>
    </div>
    <div class="sidepara">
        <h2>Our breakfast menu</h2>
    </div>
</div>
5

I see what you mean, thanks very much.

6