Why are horizontal scroll bars shown on my website?

Issue

I am making a website and a horizontal scroll bar shows. Of course, I can use overflow-x and that will fix all my problems, but I want to know the origin of the issue. Can somebody tell me what makes the scroll bar show up? Here is my CSS:

body {
    background-image: url("rain.jpg");
    background-repeat: no-repeat;
    background-size: 100% 800px;
}

#header {
    width: 83%;
    height: 70px;
    background-color: blue;
    border: cyan solid 3px;
    border-radius:20px;
    position: relative;
    top: 20px;
    margin: auto;
}

p {
    font-size:30px;
    font-weight: bold;
    color: yellow;  
    position: relative;
    right: -450px;
    top: -8px;
}

#container {
    position: relative;
    width: 83%;
    height: 1000px;
    top: 50px;
    margin: auto;
    background-color: blue;
}

.img {
    height: 150px;
    width: 225px;
    padding: 0px;
    padding-top: 30px;
    cursor: pointer;
    opacity: 1;
}

.click {
    height: 400px;
    width: 600px;
    position: relative;
    right: -200px;
    cursor: pointer;
}

li {
    display: inline-block;
}

Solution

Note that you have your <p> elements relatively positioned and shifted right with right: -450px.

With position: relative the original space for the element is reserved. So while you’re shifting the element rightward 450px, its original space in the layout is kept intact, and the document is lengthened horizontally. That’s the reason for the scrollbar.

enter image description here

Remove or adjust the right: -450px rule to see the difference.

Also, simply for contrast, switch relative with absolute positioning, which removes the element from the document flow, and the original space is eliminated.

Read more about CSS positioning at MDN.

Answered By – Michael Benjamin

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.