How to position a html element under a fixed div

I am trying to position some html elements (particularly h1 and p) under a position: fixed div without having to use the <br> element, because if the top div gets resized (in height), then it will overlap the <h1> and <p> element. Since this type of question usually needs code, here it is:

index.html file:

<!DOCTYPE html>
<html>
    <head>

        <title>Home | lobuo</title>

        <link type="text/css" rel="stylesheet" href="stylesheet-main.css">

    </head>
    <body>

        <div id="menuBack">

            <ul id="menuBar">

                <li class="menuItem"><a href="index.html">Home</a></li>
                <li class="menuItem" class="subMenuHolder">

                    <a>Projects ▾</a>

                        <ul class="subMenu">

                            <li><a href="pages/minecraft.html">Minecraft projects</a></li>
                            <li><a href="pages/mods.html">Minecraft mods/plugins</a></li>
                            <li><a href="pages/webapps.html">Web apps</a></li>

                        </ul>

                </li>

            </ul>

            <a href="https://github.com/lobuo">
                <img class="socialIcon" src="img/Octocat.png" />
            </a>
            <a href="https://www.youtube.com/LobuoDev">
                <img class="socialIcon" src="img/YouTube-icon-full_color.png" />
            </a>

        </div>

        <br><br><br><br>

        <div>
        <h1>Welcome to my website!</h1>
        <p>This is my website. I know how to code a little HTML and JavaScript. I do not have many projects here yet, but there will be some soon. The website is currently under construction, so don't be too dissapointed if a link doesnt work, or a page doesnt exist.</p>
        <p>If you find something wrong with the website, you can report it as a bug <a>here.</a></p>
        </div>
    </body>
</html>

and here is the stylesheet-main.css file:

body {
    margin: 0px;
}

#menuBack {
    height: auto;
    width: 100%;
    background-color: rgba(9, 52, 100, 0.92);
    position: fixed;
}

.menuItem {
    color: #e5822e;
    display: inline-block;
    font-size: 25px;
    font-family: verdana, sans-serif;
    padding-left: 15px;
    padding-right: 15px;
}

.menuItem:hover {
    color: #ab6122;
    background-color: rgba(48, 95, 147, 0.92);
}

.socialIcon {
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    float: right;
    padding: 20px;
}

a {
    text-decoration: none;
    color: #f44d4d;
}

h1 {
    font-family: sans-serif;
    text-align: center;
}

p {
    font-family: "andale mono",  "courier new", courier, serif;
    padding: 10px;
}

/* MenuBar dropdown menu came from here: http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ */

#menuBar {
    float: left;
}

#menuBar > li {
    float: left;
}

#menuBar li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}

#menuBar ul {
    position: absolute;
    list-style: none;
    left: 7.1em;
    display: none;
}

#menuBar ul li a {
    width: auto;
    background-color: rgba(9, 52, 100, 0.92);
}

#menuBar ul li a:hover {
    background-color: rgba(48, 95, 147, 0.92);
}

#menuBar li:hover ul {
    display: block;
}

Thanks in advance :D

Solution

Set the margin-top of the div that you need to be pushed down.

So wrap everything that needs to be pushed down in a div with a class name. Like:

<div class="container">
    //everything that needs to be pushed down goes here
</div>

Then in your css you can push that whole container down by setting it's margin-top

.container {
    margin-top: 100px;
}