Navigation bar won't centre on smartphone devices

Question

The website I'm having issues with is Bristol Plumber 247 if you visit this site on your desktop or laptop, the nav bar is perfect however when I use my iphone it drops to under.

*I cannot post picture because I don't have 10 reputation on this site I am happy to email or just visit on mobile device and you will see what I mean.

I've look at the CSS and set nearly every width to 100% and Margin to 0 auto; I've look and looked and the code and was wondering if somebody would have a look at the code for me and tell me where am I going wrong. I'm at pulling my hair out stage.

Answer 1

Try to set the wrapper according to CSS media screen like:

@media screen and (max-width: 1240px) {
  .wrapper { width:1100px; }
}
@media screen and (max-width: 1140px) {
  .wrapper { width:980px; }
}
@media screen and (max-width: 1024px) {
  .wrapper { width:100%; }
}

This should work.