White Space Right Side of Bootstrap Website

Question

I've been trying all kinds of solutions listed on StackOverflow to solve this problem but can't seem to get it right. There is white space on the right side of our website in the mobile view.

Any tips? Thank you so much. Been stuck for hours.

http://www.hackerparadise.org

Answer 1

I've added :

 html  {

    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 

}

Into your CSS at the very top above the other classes and it seemed to fix your issue.

Answer 2

Most of the problems I can see is on your bootstrap structure. You are adding additional row without adding another div with a grid class e.g col-md-*

Sample:

<div class="container">
    <div class="row"> 
        <div class="row"> <!-- additional row -->
            <div class="inner-div">
                Inner Div
            </div>    
        </div>
    </div>
</div>

A clear problem is visible in this fiddle when you scale down your browser.

Solution:

Before adding another row class element you must add first an element which has a grid class

<div class="container">
    <div class="row">
        <div class="col-md-12"> <!-- DIV with a grid class -->
            <div class="row">
              <div class="inner-div">
                Inner Div
              </div>    
            </div>    
        </div>
    </div>
</div>

You can see it's fixed on this fiddle

In your case I can see the problems under #day and #about elements.

Under #day:

Under #about:

Also the other problem is on the css. Add this to your css:

.btn-design {
   margin-left: 0;
   margin-right: 0;
}