Can Someone Tell Me Why My Overflow-x Is Effecting My Menu Border?

So, I added an overflow-x: hidden; so that the horizontal scrollbar won't show and now it's affecting the border I have on my menu bar the right side of the menu bar is not showing

Solution 1:

I believe it's because your #big_wrapper's width equals #top_menu's width which is 1000px. Remember that when you define border: 1px solid black; in your #top_menu then it will add 1 pixel on every side of your #top_menu. Simply saying that your #top_menu's width is now 1002px. To overcome that problem you have 2 choices below:

1. Decrease the #top_menu's width into 998px;
2. Add box-sizing: border-box; into your #top_menu