Question

I have a section and the a div one right after the other, I want to have the div go slightly below the section with margin-top:-10px to cut off the rounded corners I have created with border-radius. Right now all that happens is the top section moves up and the text inside of it goes on top of the div not the section itself. Here is it in jsfiddle http://jsfiddle.net/37PkJ/. Basically I wont the orange and black to fall underneath the blue. Thanks

html/wordpress

<?php
/*
Template Name:Home
*/
?>
<?php get_header(); ?>
    <section id="mastHead">
        <div id="navResponsive">
            <ul>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
                <li><a href="#contact">contact</a></li>
                <li><a href="#footer"><i class="icon-twitter"></i></a></li>
                <li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li>
            </ul>
        </div>
        <div id="nav">
            <ul>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
                <li><a href="#contact">contact</a></li>
                <li><a href="#footer"><i class="icon-twitter"></i></a></li>
                <li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li>
            </ul>
        </div>
    </section>
    <div id="menu">
        <div id="menuCenter">
            <a href="toggleMenu"><i class=" icon-reorder"></i></a>
        </div>
    </div>
<?php get_footer(); ?>

css

html {
  font-size: 62.5%; }

#container {
  background: aqua;
  width: 100%; }

#mastHead li {
  list-style-type: none; }

ul {
  margin: 0;
  padding: 0; }

#navResponsive {
  display: none; }

#menu {
  display: none; }

/*-------------MEDIA QUERIES BITCHES---------------*/
/*-------------------------------------------------*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
  #navResponsive {
    display: block;
    background: #44749d;
    width: 50%;
    margin-left: auto;
    margin-right: auto; }
    #navResponsive li {
      text-align: center; }
    #navResponsive a {
      font-size: 3em; }

  #nav {
    display: none; }

  #menu {
    display: block;
    width: 50%;
    background: orange;
    margin-left: auto;
    margin-right: auto; }

  #menuCenter {
    width: 4.5em;
    padding: 1em;
    border-radius: 0.5em;
    margin-left: auto;
    margin-right: auto;
    background: black; }
    #menuCenter a {
      text-decoration: none; }
    #menuCenter i {
      font-size: 5em; } }
/*---------------END MEDIA QUERIES-----------------*/
/*-------------------------------------------------*/

Answer 1

I had to set position to relative on mastHead div. Simple.