Why are horizontal scrollbars displayed on my site?

Question

I am building a website and showing a horizontal scrollbar. Of course, I can use overflow-x, and this will fix all my problems, but I want to know the origin of the problem. Can someone tell me what the scroll bar does? 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 position the elements <p>relatively positioned and shift to the right with right: -450px.

position: relative . , 450px, , . .

right: -450px, .

, , relative absolute, , .

CSS MDN.

Answer 2

.

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