Positioning issues with display block

Question

I have my navigation set to display: block; and my paragraph set to display: block; however my paragraph section sits at the top of the page covering the navigation. I have the css for my navigation and I would have thought it should push other objects away?

nav {
display: block;
}


 nav ul {
    display: block;
    position: fixed;
    -webkit-box-sizing: border-box; width: 100%;
    -moz-box-sizing: border-box; width: 100%;
    box-sizing: border-box; width: 100%;
    text-align: center;
    list-style-type: none;
    text-decoration: none;
    background: rgba(255,255,255,0.2);
    }

    nav li {
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 10px;
        padding-bot: 10px;
        font-family: "Changa One",Cursive;
        font-size: 1.225em;
        border-bottom: 2px solid transparent;
        transition: border-color 300ms;
        -webkit-transition: border-color 300ms;
        -moz-transition: border-color 300ms;
    }

This is my paragraph code:

p {
background-color: #fff;
display: block;
color: orangered;
}

If I add margin or padding it still sticks to the top of the page just pushes the text inside further down. Making the element larger but not further down. Any answers are much appreciated :)

Answer 1

    position: fixed;

Fixed element will ignore your nav, making your nav's height automatically 0. You'll need to set a height to nav or change position of nav ul instead