'Why are horizontal scroll bars shown on my website?

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;
}
htmlcss


Solution 1:[1]

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.

Solution 2:[2]

I'd point to this.

p{
    ...
    position: relative;
    right: -450px;
    ...
}

Solution 3:[3]

Just use these lines

body {
margin:0;
padding:0;
overflow-x:hidden;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Josh S.
Solution 3 Akash Das

Related Questions