HTML/CSS中带有居中元素的全宽标题

我从2010年购买了一个旧的WordPress主题，并决定通过添加一个粘滞的标题使其更加现代。为此，我下载了一个名为MystkyMenu的插件。该插件似乎工作完美，然而，我的主题标题有一个960px的宽度，并希望使其全宽度

我开始使用我的主题的HTML/CSS代码，以便将标题宽度更改为全宽度，但我在导航菜单的中心位置出现了问题，可能还有一些我想添加到标题中的其他元素

HTML代码：

<header id="header">
        <div class="container_header clearfix">
                <div class="menu-row-top clearfix">

                  <div class="test-text"> This is just some random text </div>

                  <!-- NAVIGATION -->
                  <nav class="primary">
                       <?php wp_nav_menu( array(
                         'container'       => 'ul', 
                         'menu_class'      => 'sf-menu', 
                         'menu_id'         => 'topnav',
                         'depth'           => 0,
                         'theme_location' => 'header_menu' 
                        )); 
                        ?>
                   </nav><!--.primary-->
            </div>
     </div>
</header>

在上面的代码中，我基本上在蓝色标题栏的最左边有测试文本，在最右边有导航菜单。 我读过很多关于类似问题的论坛帖子，人们似乎建议增加一个最大宽度

但是,

.menu-row-top {
max-width: 960px;
}

所有东西都从屏幕最左边向左移动，以960像素的分辨率显示

我想获得正确的HTML/CSS组合，以便能够始终将.menu行顶部中的元素置于标题栏的中心，以便具有不同屏幕分辨率的用户可以轻松浏览我的网站。我基本上希望所有东西都从左到右对齐，我将使用CSS最终正确定位元素

尝试以下操作：

.menu-row-top {
    margin: 0 auto; 
    max-width: 960px;
}

---

您可以将所有要居中的元素包装到新分区中，例如“headerCenter”

.menu-row-top {
    margin: 0 auto; 
    max-width: 960px;
}

   <div class="menu-row-top clearFix">
     <div class="headerCenter">
     //centered elements e.g
     <nav class="primary">
     links
     </nav>
     </div>
     //full width located elements e.g.
     <div class="logo"></div>
   </div>

.headerCenter{
max-width: 960px;
margin:0 auto;
}
.logo{
margin-left:50px;
margin-top:50px;
width:100px;
height:50px;
background:url('path/to/logo/image');
background-size:100%; or (100% 100%)
}