Chris, that gray background showed more in the home page because I was desperately trying to increase the width of the wrapper, hoping that it would undo the squeezed width of the homepage. But it obviously does not help.
The clearfix was applied to bring forth the background image of the sidebar for the faux equal-height-two-columns that Chris C showed us here. In the home page and holidaySpecials (if you just click on the “specials” of the main nav) page, I don’t need that left sidebar, so the “clearfix” class was not applied. But the shifted top-sub-level nav and squeezed-width did not appear/occur in the “holidaySpecials” page, only in the home page. That’s what I don’t understand.
To try things out, I did applied the clearfix as you shown above for the home page as well as specifying a width in “#nav” of the CSS, yet nothing changed/worked.
In light of this, what else can we try to see if it would make the difference?
Edit: here is a picture showing exactly what I meant by the home page being squeezed: 
Looking at the right edge of the picture, it shows an indented right side, make the whole page narrower than the rest of the pages, which in turn forces the nav bar to break off and move that last link to the next line. Again, this only occur in the home page.
EDIT2:
Tried converting the “holidaySpecials” page to the “Index” page. Something peculiar with FireFox. The over width of the newly converted Index got narrowed (seemed to be squeezed) in FireFox, but not in Chrome or IE.
One hopeful thing, I don’t see the problem with the main navigation as previously described.
Chris, you are right, in that the wrapper of the “holidaySpecials” page does have the clearfix class applied. Somehow, I didn’t remember that.
Now, what is it about the FF and this home page that’s making it squeezed like that? Just by simply renaming the “holidaySpecials” page to “Index” changes the width.