White space on right side of page

Question

I have a problem with unwanted free space on right side of my webpage. Here is my webpage :

I add these code

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

and it's solved my problem but, it disable footer icons on webpage so how can i do this?

Here is webpage :

webpage url

your ``footer`` ``div class"=row"`` tag is not within the ``container`` tag — Rakesh Raj, Oct 08 '17 at 10:53
https://stackoverflow.com/questions/46012482/unwanted-white-space-on-right-side-in-mobile-view check this answer it might help you — sapna, Aug 26 '20 at 16:10

score 8 · Answer 1 · answered Oct 08 '17 at 10:55

8

One of your elements it's causing that margin. To find out you can set all elements outline border for 1px red and then fix it.

*{
 outline: 1px solid red;
}

answered Oct 08 '17 at 10:55

Kreshnik

145
5

2

I am a beginner in web development and your suggestion helped me a lot. Thanks. – Alexander Dec 10 '19 at 04:52

score 1 · Answer 2 · answered Oct 08 '17 at 10:52

Don't add this code but instead you need to correct a HTML code in the footer part. actually it's looking like this

<footer id="site-footer" class="footer ">
  <div class="container">
  </div> <!-- issue here !!-->
  <div class="row" itemscope="" itemtype="http://schema.org/Organization">
    <div class="contacts">
      <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
        <div class="contacts-item">

        </div>
      </div>
    </div>
  </div>
</footer>

You have closed the div of the container badly, it should be closed after the row div. That's why you are having the white space, as the row class add negative margin that are corrected by the container.

ok, i change this but it allready there. these codes not make change — Canberk Çakmak, Oct 08 '17 at 14:17

Rakesh Raj · Answer 3 · 2017-10-08T15:19:46.860

0

Mistake in your HTML footer > container closing tag

Edited another mistake

//1: header mistake - Position  
//the problem is position: relative in header media query on the theme-styles.css

   .header @media (max-width: 768px){
     /* position: relative; */ /*remove this*/
        animation: none !important;
        padding: 0px 0;
    }

//2: footer mistake - container closing tag
    <footer id="site-footer" class="footer ">
       <div class="container">
            //container closed here
       </div>//remove this close tag
           <div class="row>"---</div>
           <div class="sub-footer large">---</div>

      </div>//container close here
   </footer>

edited Oct 08 '17 at 15:19

answered Oct 08 '17 at 11:10

Rakesh Raj

129
6

ok, i change this but it allready there. these codes not make change – Canberk Çakmak Oct 08 '17 at 14:17
I have checked the mistake using your linked [web page](http://fikirfabrika.org/). by inspecting it's worked – Rakesh Raj Oct 08 '17 at 14:28
i know it's looks like worked but, in mobile phone, whitespace allready there. – Canberk Çakmak Oct 08 '17 at 14:30
I checked the problem is in your header section – Rakesh Raj Oct 08 '17 at 14:34
remove ``position:relative`` property in ``.header (max-width: 570px){--}`` on ``theme-styles.css`` file – Rakesh Raj Oct 08 '17 at 15:01
thanks for help, i change this. but still header gives this whitespace. Please help me again ? – Canberk Çakmak Oct 08 '17 at 17:37
I am always checking them on the website, I think error is in your script – Rakesh Raj Oct 08 '17 at 18:13

White space on right side of page

3 Answers3

Linked