强制Logo与菜单保持一致

Question

我在试着拿我的标志，以保持与菜单一致。

示例：

_________________|<Edge of logo------|____________________________________
_________________|<Edge of Menu ---------------------------|_______________

无论页面大小如何，这两条边都应该对齐。

当前，当页面调整大小时，项目分开并独立移动.

以下是指向该站点的链接: goo.gl/46yUrt

如果你需要其他信息，请告诉我。

编辑1

header.php代码：(不确定这是否与独立对齐有任何关系，但我已经将其包括在内)

            <div id="navbar" class="navbar">
<div class="logo-align">
                <a href="http://level42.ca/village"><img src="http://level42.ca/village/wp-content/uploads/2014/05/logo.png" width="370" height="61" alt="© FDC Designs"></a><P></P>
            </div>
                <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                    <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
                    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
                </nav><!-- #site-navigation -->
            </div><!-- #navbar -->

Style.css代码：

/**
 * 4.2 Navigation
 * ----------------------------------------------------------------------------
 */

.main-navigation {
    clear: both;
    margin: auto;
    max-width: 1028px;
    min-height: 35px;
    position: relative;
    /*float:right;
    Padding: 0 300px;*/
    z-index: 1;
    top: 30px;
    Background: #141412;
}

标志对齐：

.site-header .logo-align {
     padding: 30px 0px 0px 0px;
     position: relative;
     left: 20%;
}

我不是CSS专家，充其量是个十足的菜鸟。我试着添加left: 25%，这似乎是可行的，但前提是我不改变页面大小。我玩过填充、定位和浮动命令，但我似乎无法正确地排列它们。

如果您需要更多的信息，请告诉我。

Answer 1

在Mariano Urbonas的帮助下，代码不是这样的：

<div class="logo-align">
          Logo
</div>
<div id="navbar" class="navbar">
     <nav id="site-navigation" class="navigation main-navigation" role="navigation">
          Nav Bar
     </nav><!-- #site-navigation -->
</div>

为了使每个元素对齐，我修改了header.php代码如下:将这两个元素添加到1 div中。

<div id="navbar" class="navbar">
     <div class="logo-align">
          Logo
     </div>
     <nav id="site-navigation" class="navigation main-navigation" role="navigation">
          Nav Bar
     </nav><!-- #site-navigation -->
</div>

在这样做的过程中，我能够将它添加到<div id="navbar" class="navbar">中，并且它似乎在任何大小上都正确地对齐了它们。

background-color: #ffffff;
margin: auto;
max-width: 1028px;
width: 100%;

我还被要求删除我之前编写的独立对齐代码。

来自<div class"logo-align">

 left: 20%;

来自<nav id="site-navigation" class="navigation main-navigation" role="navigation">

 margin: auto;
 position: relative;

在做这些改变时，它似乎如我所预期的那样起作用。

Answer 2

尝试将徽标和菜单放在同一个div或甚至一个标签中，并对其应用左边距。我不完全明白你的网页是怎么建的