Navbar not working in Mobile - Bootstrap

Question

I've tried everything on what I could find on stackoverflow but I've had no solution work for me so far.

<!-- Navigation -->
<nav id="custom-nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../Pho Lee/index.html">Pho Lee</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navigationbar">
            <ul class="nav navbar-nav">
                <li>
                    <a href="../Pho Lee/index.html">Home</a>
                </li>
                <li>
                    <a href="../Pho Lee/menu.html">Menu</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

This is my Navbar code that I'm trying to fix.

Here is the CSS that I am using for my navbar

.nav {
    float: right;
    margin-right: 475px;
}

#custom-nav {
    background-color: rgba(0,0,0,0);
    border: 0;
    box-shadow: none;
    z-index: 999;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
    transition: background .5s ease-in-out, opacity .5s ease;
}

#custom-nav a {
    color:white;
}

#custom-nav .dropdown-menu {
    border-radius: 0;
    border: none;
    border-top: 5px solid transparent;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-top: 0;
}

#custom-nav .container {
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-transition: padding-top .5s ease, padding-bottom .5s ease;
    -moz-transition: padding-top .5s ease, padding-bottom .5s ease;
    transition: padding-top .5s ease, padding-top .5s ease, padding-bottom .5s ease;
}

#custom-nav.affix {
    top: 0;
    min-width: 100%;
    background-color: black;
    opacity: 0.8;
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
    transition: background .5s ease-in-out, opacity .5s ease;
}

EDIT Added CSS

Answer 1

Solution: Remove the styles on .nav, floating right and margin are messing everything up.

See codepen link in comments