I am noticing that the last item in my navigation when hovered expands the background, but not the header background if the browser window is around 1200px wide. You can see my site here:
[My Site](http://www.rose-hulman.edu/testing/ “My Site”)
You have to scale the browser window down to where it is close to the last item on the right side of the navigation, then hover over “internships”, and then to see the gap made by the navigation, move the scroll bar over to the right. Notice the space created at the end of the header bar? What is causing this?
I get the gap without hovering, it’s the way that you formatted your CSS and HTML document. I’d take a look at maybe reworking the basic structure to solve your problem. You’re using fixed width and fluid percentages widths in odd places.
The last drop down ul is extending beyond the 1200px screen, causing the horizontal scroll on hover. You just have to position it absolutely from the right, instead of the left. Instead of giving it left:-9999px and 0 on hover, change it to right:…………
Well, It fixed it for desktop browsers, but not for anything mobile. Could someone take a look at my site on a tablet or phone and give me some ideas as to what is causing this large space to the right of the header. Also, the header doesn’t extend the full length of the page either. Thanks! http://www.rose-hulman.edu/testing/capabilities.html