title: Navigation bar exceeds the width of the page
body: <p>I'm currently working on a site that a an ex-colleague started on and I've noticed that every time the browser window's resolution gets to 768px or lower the navigation turns in to a drop down menu, which seems to be wider than the page itself. 
  And there's a horizontal scroll bar on the bottom allowing the user to scroll to the right where there's a bunch of white space next to the page.</p>
  
  <p>(here's a picture of the problem I'm having)</p>
  
  <p><img src="https://i.stack.imgur.com/CdmLt.jpg" alt=""></p>
  
  <p>Because I didn't built this page from scratch I'm not entirely sure what code I can delete and I'm not entirely sure where the problem lies.
  Nor am I that sure of which part of the code to post here.</p>
  
  <p>I did search the site for questions similar to mine and some posts spoke about changing the "overflow" settings but that unfortunately didn't solve the problem for me. 
  I do apologise if there's an exact same post as mine.</p>
  
  <p>I've uploaded the site at:
  <a href="http://ariellafreinders.co.uk/LGA/copy.html" rel="nofollow noreferrer">http://ariellafreinders.co.uk/LGA/copy.html</a>
  (so if anyone would like to have a look at the code they can do so there.) </p>
  
  <p>Initially I thought it would it make sense to assume that the error lies somewhere in the media queries because this problem only exists in smaller resolutions, but I'm having second thoughts.</p>
  
  <p>I hope my post made sense, thanks for your time.</p>