Padding and margin causing horizontal scrollbars

I am building a template for a wordpress website, there is some padding and margin-left that is causing a horizontal scrollbar.

Here's the test site

http://dalespenceyoga-com.domain-ref.http.helium.lon.periodicnetwork.com/

I narrowed the issue down to this line of the css

#navigation ul li {float: left; margin-left: 2px; padding: 3px 8px; background-color: #445d6c; border: 1px solid #445d6c;}

removing the margin-left: 2px; padding: 3px 8px; portion removes the scrollbar. I have been looking at this for so long now, can anyone see what I can do to keep the layout looking the same but removing the scrollbar?

Thanks