CODEWITHSUNDEEP
csstwitter-bootstrap
jproux
jproux

Reputation: 265

Webpage not 100% Width

I have a one page website. My problem is that at the right hand side, there is about a 15px margin. The widths of my body and div's are set to 100%. I also have to scroll slightly at the bottom of my page. This issue is relevant on all screen sizes. How can I fix this? I'm not sure which css and html code to highlight so I will attach just the code relevant to the main top as all other sections (like about or contact) should have the same solution...

Here's an image of the issue I am currently facing.

enter image description here

HTML:

<div id="main-top" class="main-top">
    <div class="main-content">
        <div class="container content">
            <div class="row text-center">
                <h2>
                    LORUM IPSUM
                    <div class="words words-1">
                        <span>Lorum Ipsum 1</span>
                        <span>Lorum Ipsum 2</span>
                        <span>Lorum Ipsum 3</span>
                    </div>
                </h2>
            </div>
         </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    background-color: #FFF !important;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.main-top {
    position: relative;
    width: 100%;
    height: 100%;
}

.main-top .main-content {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: table;
}

Upvotes: 2

Views: 5635

Answers (5)

Onsightfree
Onsightfree

Reputation: 357

I had the same problem as you - I was using Bootstrap 4 though. If anyone of you have this issue, I recommend the following:

Open up google devtools (CTRL+U), and start removing elements of your site until you find the section that causes this misplacement.

Then analyze that section in your html code.

In my case I had a , which has a -15px margin on both sides of your page. You have to use a as wrapper, and not directly begin with a "row".

Hope this helps someone..

Upvotes: 2

Pranav Choudhary
Pranav Choudhary

Reputation: 2796

add this 

 Html, body 
{
    max-width: 100%
    overflow-x: hidden;
 }

hope this will solve your problem.

Upvotes: 4

alexander helsinghof
alexander helsinghof

Reputation: 57

I had the same problem,

In my case I had a padding that pushed out a specific section which was kinda hard to find.

What I did was to remove section after section in my HTML strcuture. Finally managed to find the problem by simple selecting the element and removed it in Dev tools Chrome, (key:F12 on pc) or right click and inspect).

Hope this helps and good luck!

Upvotes: 0

martinsoender
martinsoender

Reputation: 213

Most of the major browsers default have by default set a margin to 8px. It is defined in pixels by the user-agent-stylesheet your browser provides.

Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.

If you want to change it, you can just do this:

body {
   margin: 0;
   padding: 0;
   ...
}

If you have larger complex websites I highly suggest using normalize.css. As it resets a lot of default the pre-defined values to be consistent across browsers.

Upvotes: 3

Keara
Keara

Reputation: 620

I stuck your code in a snippet and added margin: 0; to your html, body { ... } CSS chunk. That fixed the issue (as far as I can tell from running the below code snippet, at least):

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    background-color: #FFF !important;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.main-top {
    position: relative;
    width: 100%;
    height: 100%;
}

.main-top .main-content {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: table;
}
<div id="main-top" class="main-top">
    <div class="main-content">
        <div class="container content">
            <div class="row text-center">
                <h2>
                    LORUM IPSUM
                    <div class="words words-1">
                        <span>Lorum Ipsum 1</span>
                        <span>Lorum Ipsum 2</span>
                        <span>Lorum Ipsum 3</span>
                    </div>
                </h2>
            </div>
         </div>
    </div>
</div>

Upvotes: 0

Related Questions