These are all CSS issues.
Width-wise, you have an element within your header (<div class="wrapper clearfix">...</div>
) that has an explicit width of 960px. The widths of header, div.hero and footer will be given by the width of the browser window. So, if the browser window is less than 960px wide you get div.wrapper overflowing which causes the unwanted yellow part to show.
Probably what you want to do is set min-width: 960px;
on your body element.