layout.css layout.html

메뉴를 한줄로 표시하고 싶은데 좌측에 있던 메뉴를 가운데부분에 정렬하고나니 두줄로 표시가 됩니다.

html파일하고 css파일 첨부합니다ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 몇시간째 이 문제가 해결이 안되네요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 어드부분을 어떻게 수정해야 할까요?

그리고 게시판을 만들때 1 하위 메뉴가 2,3 이라면 1을 선택했을때 2,3의 게시글이 전부 보이게 하려면 어떻게 설정해야 하나요? 현재는 1에 하위메뉴로 2,3을 설정해 주었음에도 1을 선택하면 1에 관한 게시글만 보입니다. 고수님들 도움부탁드려요

 /* 메인메뉴 영역 */
#gnb_wrp{z-index:20;min-height:33px;border-top:2px solid#444;border-bottom:1px solid#444;background:url(../img/gnb_wrp.png)\9;background:rgba(255,255,255,.8)}
#gnb {float:left;margin:0 30%;padding:0}
#gnb li{position:relative;list-style:none}
#gnb .li1{float:left}
#gnb .li1:before{content:"";display:block;position:absolute;top:11px;left:0;height:11px;border-left:1px solid#CCC}
#gnb .li1:first-child:before{border:0}
#gnb .a1{display:block;padding:10px 18px;text-align:center;font-weight:bold;font-size:13px;line-height:13px;text-decoration:none;color:#333;text-shadow:0 0 1px#EEE !important;-ms-transition:color .4s;-moz-transition:color .4s;-webkit-transition:color .4s;transition:color .4s text-align:center;}
#gnb .a1:hover{-ms-transform:scale(1.1);-moz-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1)}
#gnb ul{display:none;position:absolute;top:33px;left:0;z-index:10;margin:0;padding:5px 0;background:url(../img/gnb_wrp.png)\9;background:rgba(255,255,255,.9);border:1px solid#444}
#gnb .ul2 li{padding:0 5px}
#gnb .ul2 a{display:block;min-width:60px;padding:6px 24px 6px 12px;font-weight:bold;text-decoration:none;white-space:nowrap;color:#444;border-radius:3px;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s}
#gnb .ul2 b{position:absolute;right:8px;*right:12px}
#gnb .ul2 a:hover,#gnb .ul2 a:focus{background:#999;background:rgba(0,0,0,.4);color:#FFF}
#gnb .ul2 .on .a2,#gnb .a3.on{color:#FFF;background:#444 !important}
#gnb .ul3{top:0;left:}

 <!--// 메인 메뉴 영역 -->
   <div id="gnb_wrp" class="clear" style="width:100%">
       
    <!-- GNB -->
    <ul id="gnb" class="ui_font">
     {@$_idx = 0}
     <li loop="$main_menu->list=>$key1,$val1" cond="$val1['link']" class="li1<!--@if($_idx > 3)--> m_li1_tg<!--@end-->">
      <a class="a1 {$_colorset_list[$_idx]}<!--@if($val1['selected'])--> on<!--@end-->" href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><center>&nbsp&nbsp{$val1['link']}</center></a>
      <block cond="$val1['list']">
      <button type="button" class="tg_ul2 m_yes_inline"><strong>−</strong><span>+</span></button>
      <ul class="ul2">
       <li loop="$val1['list']=>$key2,$val2" cond="$val2['link']" class="li2<!--@if($val2['selected'])--> on<!--@end-->">
        <a class="a2" href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'"><center>&nbsp&nbsp{$val2['link']}</center><b cond="$val2['list']">+</b></a>
        <ul cond="$val2['list']" class="ul3">
         <li loop="$val2['list']=>$key3,$val3" cond="$val3['link']"><a class="a3<!--@if($val3['selected'])--> on<!--@end-->" href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'"><center>&nbsp&nbsp{$val3['link']}</center></a></li>
        </ul>
       </li>
      </ul>
      </block>
     </li>
    </ul>
    <div style="width:1px">
    </div>
   </div>
  </div>