Seperate Menu Item in bootstrap navbar and centered them

I want to create button like menu using navbar. I want to do this because it's collapsible interface for small devices.

I write this HTML markup:

<div class="container">
    <nav class="navbar" style="background-color: transparent;">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" style="background-color: black;">
                    <span class="icon-bar" style="background-color: white;"></span>
                    <span class="icon-bar" style="background-color: white;"></span>
                    <span class="icon-bar" style="background-color: white;"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                    <li><a href="#">Page 4</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

and this styles:

nav ul {
        width: 100%;
        text-align:center;
    }

        nav ul li {
            text-align: center;
            width: 17%;
            background-color: #dbd9d9;
            margin: 10px;
        }

but there is some problem:

1. this menu items isn't center in ul. How I can center all li in ul?

2. If I resize the window in some width this menu broke in 2 line. How I can fix this that my menu being 1 line for md an lg sizes?

Demo

Thanks