Some html+css code make all page shift

Question

I have notice that shift on 2 html+css pages are different. When i start to look at code, i find that this piece of code shift page on 5-10px to the right, and i cant understand why it happens. Maybe you will notice why.

    <div class='logo-text'>
        <hr>
        <div id='logo-text-h'>Events</div>
        <div id='logo-text-l'>Short text about upcoming events</div>
    </div>

css

.logo-text
{
    width: 90%;
    max-width: 1200px;
    margin: 70px auto 40px auto;
}
#logo-text-h
{
    width: 150px;
    margin: -40px auto 0px auto;
    padding: 0px 20px 0px 20px;
    text-align: center;
    font-size: 350%;
    background-color: rgba(243, 243, 243, 1);
}
#logo-text-l
{
    text-align: center;
    font-size: 200%;
}
.logo-text hr
{
    color: rgba(255, 255, 255, 0.3);
}

Site on hosting here:

1. http://koryato.yomu.ru/index.html -shifted to the right.
2. http://koryato.yomu.ru/about.html

Answer 1

The problem is being caused by the vertical scroll bar on the right of the screen. Some of your pages are tall enough to display a vertical scroll bar, and some aren't. One way to fix that is to use:

overflow-y: scroll;

which forces a vertical scroll bar to appear on every page.

Answer 2

I noticed your website width might is bigger than the browser. Instead of using margin: -8px on you .container and .footer just set:

body {
   margin: 0;
}

or

* {
   margin: 0;
}