Trying to add top margin to a div, but its not responding - css

Question

The div class circle renders on the right had page but even adding margin:0 auto; nothing works it just stays there what gives.
Here is my html/php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
Here is my css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}

Answer 1

try to add position tag.. u can use fixed as position or relative whatever suits your needs.. to the .circle class.

Answer 2

Your circle class margins are funny.
Try this instead:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/1/
One should think that this will work too but trust the first one more:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/2/
CSS means Cascading style sheets. Cascading means that if one property is defined two or more times for the same element then the property read last is applied. So if you define margin on circle, then again latter in the same style sheet, then again later in a second style sheet with its rel link after the first in the head section, then in the head section itself after the rel links in a style tag, then again inline on the element itself, then the inline value is used. In fact that is the order they are used.

Answer 3

it would be beeter to have an example of page when you ask about css,
but here is the real problem for you
in css margin top does not work as you expect.
its not making a space on the top of your elements unless all the elements be in the same parent z-index (or simpler i mean they all have one parent) i.e all li's within a ul.
the top margin affects space between li's not between li and ul.
for making that you should give the ul a padding-top.
Hope it helps