Why are horizontal scroll bars shown on my website?

Question

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

Answer 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.

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.

Answer 2

I'd point to this.

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

Answer 3

Just use these lines

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