html - 页面滚动后标题变宽

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

我不明白是什么导致了这里的问题。如果有人可以帮助提供代码或解释，那将是一个很大的帮助

标签： htmlcss