Заголовок стал шире после прокрутки страницы

Question

У меня тут какая-то странная проблема. Я устанавливаю ширину заголовка так же, как и страницу, при загрузке страницы она выглядит нормально, но после прокрутки заголовок стал шире, чем фактическая ширина страницы.

Вот что я пробовал до сих пор html

<div id="site-header-wrapper" style="height: 91px; position: static;">
    <header id="site-header" class="site-header animated-header fixed" role="banner" style="position: fixed; top: 50px;">

        <div class="container">
            <div class="header-main logo-position-left">
                <div class="site-title">
                    <div class="site-logo">
                        <a href="#" rel="home">
                            <span class="logo logo-3x"> some content </span>
                            <span class="logo logo-3x"> some content </span>
                            <span class="logo logo-3x"> some content </span>
                        </a>
                    </div>
                </div>
                <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                    <!-- <button class="menu-toggle dl-trigger">Primary Menu</button> -->
                    <div id="mega-menu-wrap-primary" class="mega-menu-wrap">
                        <div class="mega-menu-toggle">
                            <div class="mega-toggle-blocks-left"></div>
                            <div class="mega-toggle-blocks-center"></div>
                            <div class="mega-toggle-blocks-right">
                                <div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-1" id="mega-toggle-block-1" tabindex="0"><span class="mega-toggle-label" role="button" aria-expanded="false"><span class="mega-toggle-label-closed">MENU</span><span class="mega-toggle-label-open">MENU</span></span>
                                </div>
                            </div>
                        </div>
                        <ul id="mega-menu-primary" class="mega-menu max-mega-menu mega-menu-horizontal" data-event="hover_intent" data-effect="fade_up" data-effect-speed="200" data-effect-mobile="disabled" data-effect-speed-mobile="0" data-panel-width="auto" data-panel-inner-width="auto" data-mobile-force-width="false" data-second-click="go" data-document-click="collapse" data-vertical-behaviour="standard" data-breakpoint="600" data-unbind="true">
                            <li>item 1</li>
                            <li>item 2</li>

                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </header>
</div>

Вот css

    html #site-header.animated-header.fixed {
        left: unset;
        right: unset;
        margin: 0;
        padding: 0;
    }
    .container {
        width: 100%;
        max-width: 1089px;
    }
    #site-header .header-main {
        position: relative;
        z-index: 11;
    }

#site-header .site-title {
    display: table-cell;
    vertical-align: middle;
    padding: 15px 0;
}
#site-header .primary-navigation {
    display: table-cell;
    width: 99%;
    vertical-align: middle;
    text-align: right;
    position: relative;
    z-index: 10;
}  

Я не понимаю, в чем здесь проблема. Было бы здорово помочь, если бы кто-то мог помочь с кодом или объяснением