nav bar overhangs on the left when screen size set to phone

[droneme]

Somewhere in my code something must be out of order because when the bootstrap site shrinks to phone size and you click on 'menu' the navigation links extend outside the div to the left. http://www.amfcatering.com

I rebuilt the site once figuring I had placed a div in the wrong order. I also checked my css, there are no padding or margins set that would expand it.

Any detective help would be appreciated, my css is below:

.nav {

  background-color: #3B0071;

  border: 1px solid #3B0071;

}

.nav.navbar-nav li a {

  color: #FFFFFF;

  background-color: #3B0071;

  font-size: 17.8px;

}

.nav.navbar-nav li a:hover {

  background-color: #BDC438;

}

.nav.navbar-nav li a:focus {

  background-color: #DFDF95;

}

.container-fluid.nav .navbar-header .navbar-toggle.collapsed {

  color: #3B0071;

  border-color: #3B0071;

  background-color: #BDC438;

}

.dropdown .dropdown-menu {

  background-color: #DFDF95;

}

.navbar-toggle {

  background-color: #DFDF95;

  color: #3B0071;

  border: 2px solid #BDC338;

}

.container-fluid.wrapper .navbar-header .navbar-toggle.collapsed {

  background-color: #BDC338;

  border: 2px solid #3B0071;

  border-radius: 4px;

}

.navbar-header  {

  background-color: #3B0071;

}

[BenPleysier · Accepted solution]

Line 58 delete the part that has been stricken out

<div class="container-fluid nav">

[droneme]

Perfect, thanks for the help.