CSS- Bigcartel標誌和導航在同一行？

Question

我試圖讓我的導航與我的徽標位於同一行，因此它可以位於徽標的右側，而不是位於其下。這裏是我的大卡特爾的網站，

http://kicksfactory.bigcartel.com

這裏是頭。

/*============= Begin Header Area========================*/ 

#header-area { 
    border-bottom: 1px solid {{ Border_Color }}; 
    float: left; 
    margin: 20px auto auto; 
    padding: 0 0 15px; 
    position: relative; 
    width: 100%; 
} 

#top-header { 
    float: left; 
    margin-bottom: 15px; 
    min-height: 58px; 
    position: relative; 
    width: 100%; 
} 

#header { 
margin-bottom: 0px; 
position: relative; 
margin-top: 0px; 
} 

#header h1 a { 
color:{{ Main_Text_Color }}; 
    float: left; 
    font-size: 70px; 
    font-weight: bold; 
    line-height: 100%; 
} 

#header h1 { 
    float: left; 
    font-size: 70px; 
    font-style: normal; 
    font-weight: normal; 
    letter-spacing: 1px; 
    line-height: 100%; 
    margin-bottom: 0 !important; 
    margin-top: 0; 
    max-width: 70%; 
    text-align: left; 
    text-transform: uppercase; 
    width: auto; 
} 

#header h1 img { 
    float: left; 
    max-height: 400px; 
    max-width: 500px !important; 
    min-height: 52px; 
} 

#header h1 span { 
    float: left; 
    margin-top: -10px; 
    padding: 0; 
} 

#header.image h1 span{display:none} 

#right-header { 
position: absolute; 
right: 0; 
top: 35px; 
width: auto; 
} 

這裏是導航。

/* Header Navigation Styles-------------------------------------------------*/ 


#header-navigation { 
    background: none repeat scroll 0 0 transparent; 
    border-bottom: medium none; 
    border-top: medium none; 
    clear: both; 
    display: table; 
    margin-top: 0; 
    position: relative; 
    width: 100.35%; 
    z-index: 99999; 
    padding-left: 300px; 
    text-align: right; 
    float: right; 
} 

#header-navigation ul { 
background-color: {{ Header_Color }}; 
height: auto; 
list-style-type: none; 
margin: auto; 
display: table-row; 
padding: 0; 
width: 100%; 
} 

#header-navigation ul > li { 
    border-right: 0 none; 
    display: inline-block; 
    margin: 0 !important; 
    min-width: 0; 
    padding: 0 40px 0 0 !important; 
    position: relative; 
    text-align: left; 
} 

#header-navigation ul li.break { 
height: 1px; 
padding: 0; 
margin-left:100%; /* use e.g. 1000px if your ul has no width */ 
} 

#header-navigation li > a { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    color: {{ Header_Navigation_Link_Color }}; 
    display: inline-table; 
    float: left; 
    font-family: {{ Header_Navigation_Link_Font }}; 
    font-size: {{ Header_Navigation_Link_Size }}px; 
    font-weight: 500; 
    height: auto; 
    min-width: 0; 
    padding: 0; 
    text-transform: uppercase; 
    vertical-align: middle; 
    width: 100%; 
    word-spacing: 5px; 
} 

#header-navigation li:hover a { 
    color: {{ Header_Navigation_Link_Hover_Color }}; 
} 

#sub-navigation { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: none repeat scroll 0 0 transparent; 
    display: inline-block; 
    line-height: 100%; 
    margin-bottom: 10px; 
    margin-top: 0; 
    padding: 0; 
    position: relative; 
    width: 100%; 
} 

#categories { 
    display: block; 
    float: left; 
    line-height: 100%; 
    margin-left: 0; 
    position: relative; 
} 

.categories-list > li { 
    color: {{ Header_Navigation_Link_Color }}; 
    display: inline; 
    float: left; 
    font-size: 11px; 
    font-weight: bold; 
    line-height: 100%; 
    list-style: none outside none; 
    margin-right: 30px; 
    padding-left: 0; 
    position: relative; 
    text-transform: uppercase; 
} 

.categories-list a { 
    color: {{ Header_Navigation_Link_Color }} !important; 
    font-weight: normal; 
    text-transform: uppercase; 
} 

.categories-list span { 
    display: list-item; 
    font-size: 11px; 
    list-style: none outside none; 
} 

.categories-list span:hover { 
    color: {{ Header_Navigation_Link_Hover_Color }}; 
} 

.categories-list .sub-categories span { 
list-style:none; 
} 

.sub-categories { 
left:-9999px; 
position: absolute; 
width: auto; 
} 

.categories-list li:hover ul.sub-categories { 
left: 0; 
} 

#sub-categories { 
z-index: 99999; 
top:0%; 
margin-top: 100%; 
list-style: none; 
position: absolute; 
left: -9999px; 
width: auto; 
min-width: 100%; 
} 

#subcat-container { 
    background: {{ Background_Color }}; 
    border: medium none; 
    float: left; 
    margin-left: -47%; 
    margin-top: 0; 
    min-width: 100%; 
    padding: 10px; 
    position: relative; 
    top: 0; 
    width: auto; 
    z-index: 999999; 
} 

.sub-categories li { 
float: none; 
padding: 0px !important; 
} 


.sub-categories li a { 
    color: {{ Header_Navigation_Link_Hover_Color }}; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float: left; 
    font-size: 10px; 
    font-weight: normal !important; 
    list-style: none outside none; 
    margin: 0 0 8px; 
    padding: 0; 
    text-align: center; 
    white-space: nowrap; 
    width: 100%; 
} 

.sub-categories li span a:hover { 
color: {{ Header_Navigation_Link_Hover_Color }} !important; 
} 

.sub-categories li:last-child a { 
margin:0px; 
} 


#header-navigation > ul li:hover ul{ /* Display the dropdown on hover */ 
    left:0; /* Bring back on-screen when needed */ 
} 

#sub-categories { 
left:-999999px !important; 
} 


/*============= End Navigation Styles========================*/ 

Answer 1

增加這些新的樣式規則應該工作，它規定了頭固定高度，並給出了導航線在該空間的底部的絕對位置與標誌排隊。

#header { 
    height: 146px; 
} 

#header-navigation { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

Answer 2

刪除CSS屬性

#header-navigation {clear: both; padding-left: 300px;width: 100.35%;} 
#top-header{width: 100%;float: left;}