html - Bootstrap 3 : Header creates horizontal scroll

Question

首先是链接:http://isotopethemes.com/extenso/header-10.html

HTML代码:

<header id="header-10">
    </div><!-- /.header-10-top -->
    <!-- MAIN NAVIGATION -->
    <div class="header-10-main">
        <div class="container">
            <div class="row">
                <div class="header-10-logo col-lg-3 col-md-3 col-sm-3">
                    <a href="#"><img src="img/logo.png" alt="Home 10 Main Logo"></a>
                </div><!-- /.header-10-logo -->
                <div class="header-10-nav col-lg-9 col-md-9 col-sm-9">
                    <nav class="navbar navbar-10 navigation-10" role="navigation">
                        <ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
                            <li class="zm-active zm-content-full first">
                                <a href="#">
                                    Home
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Sliders
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Pages
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Portfolio
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Elements
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Blog
                                </a>
                            </li>
                            <li class="last">
                                <a href="#">
                                    Contact
                                </a>
                            </li>
                        </ul><!-- /.zetta-menu -->  
                    </nav><!-- /.navbar-10 -->
                </div><!-- /.header-10-nav -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!-- /.header-10-main -->
</header><!-- /#header-10 -->

如果我删除“header-10-main”或“header-10-nav”，问题就解决了。

对于任何低于 1370 像素的分辨率，都有一个水平滚动条。我已经用检查员检查了所有元素，但没有一个超过 body 。只有“溢出:隐藏”有效，但下拉菜单不起作用。

如有任何帮助，我们将不胜感激。

Answer 1

改变下方元素的宽度。

.zetta-menu .w-150 { 
   width: 140px; // Currently, width: 150px; 
}

如果您可以打开左侧博客菜单 [博客 -> 博客列表] 的二级下拉菜单，那就更好了。目前它在右侧打开会产生问题。