Responsive Navigation Bar (Alignment)

Question

I have my first responsive navigation bar on my page, and can not find the rule to move the (parent?) main menu item headings to the left. (I tried a couple things, some help, some didn't). I would like to move the 'Products' tab (with the others) to the left to line up with the blue border line. I need to also ensure that the subcontent displays starting same position also, and not far left of the main title/heading . (Essentially all text content left and text subcontent left lined up with the border (horz rule) line. Any help would be greatly appreciated.
Here is site for my code: http://www.dothopper.com/
Also two great sites I found:
http://jquery-plugins.net/
Great sripts/plugins
http://tympanus.net/codrops/category/blueprints/
Great, EASY, Quality concepts, plugins, components, layouts. Great Responsive Navigation !!

Answer 1

No Notepad.  Plain vanilla is just a basic HTML page with no stylesheets attached to it other than the one you're trouble shooting.  When I looked at your page earlier, I remember seeing about 15 CSS files (some jQuery related).
Division-itis is never a good thing.   Use HTML selectors alone or with classes. 
/**This is applied to all h2 elements, regardless of where they appear**/
h2 {font-size:18px}
/**this is applied to all h2 elements that are inside the header only**/
header h2 {margin-left: 45px }
/**re-usable classes**/
.red {color: #F00}
HTML:
     <h2 class="red">This is a red, 18px heading 2</h2>
     <header>
          <h2>This is an 18px heading 2 with a margin-left of 45px</h2>
     </header>
This article is a must read:
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.