I am currently developing my first web site its just a sign posting site.. I have a Container DIV which holds everything inside it followed by a Header Div with Logo and Site Navigation (all done as Css3)

Now I created a Div after this for Main Content of site of which inside this DIV I used the <h1> to give it a heading and an inline style to colour it. Then I wanted to use a <p> after but when I preview in browser (SWR Iron) There is a massive indent on the <p>

I have tried to fix this my using margin-left but dosn't work..

I Have some pictures of the code/css and output so you can see whats going on


Here is my HTML


<!DOCTYPE html/>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/main.css">

<title>Support-Ptsd</title>
</head>

<body>
<div class="Container">
<div class="Header">
<div class="Logo"><img src="Pictures/WhiteLogo.png" alt="Support-Ptsd.com"></div>
<div class="MainMenu">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="">Finance</a>
<ul>
<li><a href="Pages/Benefits.html">Benefits</a></li>
<li><a href="Pages/WarPension.html">War Pension</a></li>
<li><a href="Pages/AFCS.html">AFCS</a></li>
<li><a href="Pages/DLA.html">DLA</a></li>
<li><a href="Pages/VeteranDiscounts.html">Veteren Discounts</a></li>
</ul>
</li>

<li>
<a href="">Activtys/clubs</a>
<ul>
<li><a href="Pages/Fishability.html">Fishabillity</a></li>
<li><a href="Pages/SurfAction.html">Surf Action</a></li>
<li><a href="Pages/Artwork.html">Art Work</a></li>
</ul>

</li>

<li>
<a href="">Therapies</a>
<ul>
<li><a href="Pages/PTSDDog.html">Ptsd dog</a></li>
</ul>

</li>
</ul>

</div>
</div>

<div id="MainContent">
<h1 style="color:fuchsia;">Currently Under Construction</h1>
<p> This Site is currently under construction all infomation is for testing purposes untill further notice</p>
</div>

<div id="botMenu"><a href="#"> Contact us</a> </div>
</div>

</body>
</html>



Current CSS


.Container
{
margin:0px;
padding:0px;
position:relative;
height:100%;
width:1024px;
left:50%;
margin-left: -512px;
}

.Header
{
height:60px;
background-color:#000000;
}

body
{
margin:0px;
padding:0px;

}

.Logo
{
position:relative;
top:10px;
left:-3px;
}

.MainMenu
{
position:relative;
left:30%;
top:-130%;
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
}
ul
{

font-family: Arial, Verdana;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;

z-index:999;
}

ul li
{

display: block;
position: relative;
float: left;

}

li ul { display: none; }

ul li a
{

border-radius: 12px 5px 12px 5px;
display: block;
text-decoration: none;
color: black;
padding: 5px 15px 5px 20px;
background:#FFFFFF;
margin-left: 4px;
white-space: nowrap;
}

ul li a:hover
{
background:#FF3399;
text-decoration: none;
color: white;

}

li:hover ul
{
display: block;
position: absolute;

}
li:hover li
{

float: none;
font-size: 20px;
}
li:hover a
{
background:#FED6F8;
text-decoration: none;
color: black;
}

li:hover li a:hover
{
background:#FF3399;
text-decoration: none;
color: white;

}


#MainContent{
position:relative;
top:50px;
font-family: Arial, Helvetica, sans-serif;

}

#BotMenu{
background-color:black;
position:fixed;
top:98%;
margin:0px;
padding:0px;
width:100%;
}