Nav Bar Text Not Centering & Covering Text

I have an html page that "contains" many pages meaning I have links at the top of the page but when they are clicked you are not actually taken to a new page. The links stay on the same page but just take you to another part of the same html page. (I think this is called single page layout with multiple pages, I forget). My page is split into 4 sections, and the first section under the nav bar contains the least amount of text. I'm not sure why but the nav bar is cutting off my p tag text. It looks like the text is covered under the nav bar.

• I'm not sure how to stop the nav bar from covering my text
• Another problem I'm having is the nav bar itself, I'm trying to center the text inside and also make the nav bar extend the full width of my page.

I tried things like padding, margin, and text align but I'm still having trouble with these 2 things. Can someone please help me out? Thanks.

Code:

    nav {
        width: 100%;
        background: #1B2631;
        overflow: hidden;
        position: fixed;
        top: 0;
    }

    ul {

        list-style: none;
    }

    li {
        text-align: center;
        float: left;


    }

<nav>
    <ul>
        <li><a href="#page1">page1</a>
        </li>
        <li><a href="#page2">page2</a>
        </li>
        <li><a href="#page3">page3</a>
        </li>
        <li><a href="#page4">page4</a>
        </li>
        <li><a href="#page5">page5</a>
        </li>
    </ul>
</nav>