Html 当导航栏和标题图像之间没有空格时，导航栏会出错

如果我将#标题上的填充设置为0，使其与下面的导航栏之间没有空格，则导航栏中的项目会向右移动，如下所示：

如果导航菜单和标题之间的间距小于2像素，则会执行此操作-将#标题上的填充设置为“padding:2px 0；”，或者将#标题的高度设置为小于152像素

图像的高度正好是150像素

当空间小于两个像素时，它会执行以下操作：

它应该是这样的，但是在标题图像和导航栏之间没有空格

CSS:

HTML

它应该是什么样子？同时，将代码配对到相关的标题和相关的CSS。@Cfreak-应该在左侧显示“Home”。我把它放进去了，但是1）它看起来根本不像截图（文本“Home”在图像下方，白色在白色上，等等）和2）在#标题上设置填充不会有太大变化。

#header {
    height: 150px;
    padding:0px 0;
    background: url(images/HeaderBackground1.png) left top repeat-x;
}

.logo {
    float: left;
    margin-left: 15px;
}

.logo h1.site_title {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:48px;
    line-height: 40px;
    font-weight: bold;
}

.logo h1.site_title a, .logo h1.site_title a:hover {
    color: #13365E;
    text-decoration: none;
}

.logo h2.site_description {
    margin: 0;
    padding:0;
    color: #13365E;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    line-height: 14px;
}

.header-right {
    float: right;
}

#top-social-profiles {
    padding-top: 10px;
    height: 32px;
    text-align: right;
    margin-right: 15px;

}
#top-social-profiles img {
    margin: 0 0 0 6px !important;
} 

#top-social-profiles img:hover {
    opacity: 0.8;
}
#top-social-profiles .widget-container {
  background: none;
  padding: 0;
  border: 0;
}

/* =MENUS
-------------------------------------------------------------- */

/* Menu Primary
----------------------------*/

.menu-primary-container {
    padding:0;
    position:relative;
    height: 40px;
    background: url(images/menu-primary-bg.png) left top repeat-x;
    z-index: 400;
}

.menu-primary {
}

.menu-primary ul {
    min-width: 160px;
}

/* First Level - Menu Primary */

.menu-primary li a {
    color: #FFFFFF;
    padding: 15px 15px 14px 15px;
    text-decoration: none;
    font-family: 'Georgia', serif;
    font-size: 12px;
    text-transform:uppercase;
    font-weight: normal;
}

<div id="container">

    <div id="header">

        <div class="logo">

            <a href="http://newerafreedom.com"><img src="http://newerafreedom.com/wp-content/themes/MyPen/images/HeaderImage1.png" alt="New Era Freedom" title="New Era Freedom" /></a>

        </div><!-- .logo -->


        <div class="header-right">
            <div id="top-social-profiles">
                            </div>
        </div><!-- .header-right -->

   </div><!-- #header --> 



            <div class="clearfix">
                        <div class="menu-primary-container"><ul id="menu-main" class="menus menu-primary"><li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://www.newerafreedom.com">Home</a></li>
</ul></div>              <!--.primary menu-->   
                </div>

    <div id="main">


        <div id="content">