How to remove white space on the side of my website

Question

I have a website ( https://olsenspkg.com ) that has white space on the right hand side of every page. Currently I have tried this to solve it:

 body { overflow-x: hidden !important; width: 100%; }

It only fixes it on chrome though. Safari still acts like I haven't put that code in.

Regular Site View

White Space on the Right

Answer 1

This element is overflown:

<div id="searchBar">

The width is the same as parents div. Change width to 300px or change that rendering completely.

Overflown div

Answer 2

The problem is with the #searchBar from your header. You gave it left:478px but it has position:relative. So it still occupies space. By giving it left 478px it made your website 478px larger to the right.

So remove that and position it using other solutions. Like a simple #searchBar { text-align:right } i guess will do the trick.

Also try to avoid using overflow-x: hidden on body . You never know what problems you might cause. Always in this scenarios try to find the element that is causing this unwanted overflow and deal with that specific element.