왜 가운데 정렬이 안될까요 ㅠ? 채택완료

</span></p>

<p>#section {

  width: 100%;

  margin: 0 auto;

  background-color: #aeb2b9;

  padding: 10px;

}

.custom-selectbox {

 position: relative;

 float: left;

 width: 296px;

 height: 40px;

 margin-right: 5px;

 z-index: 20;</p>

<p>}

ul.selectbox-options {

 position: absolute;

 width: 100%;

 height: 40px;

 max-height: 40px;

 margin: 0;

 padding: 0;

 border: 1px solid #aaa;

 background-color: #fcfcfc;

 z-index: 21;

}

ul.selectbox-options li {

 list-style: none;

}

ul.selectbox-options.opened {

 height: auto;

 max-height: 500px;

}

ul.selectbox-options li {

 display: none;

 height: 40px;

 padding: 0 10px;

 line-height: 40px;

 font-size: 15px;

}

ul.selectbox-options li.selected {

 font-weight: bold;

 text-align:center;

}

ul.selectbox-options li.selected,

ul.selectbox-options li:first-child,

ul.selectbox-options.opened li.selected:first-child {

 background-repeat: no-repeat; background-image: url(img/customized_selectbox.png); background-position: 100% 6px; 

}

ul.selectbox-options.opened li:first-child,

ul.selectbox-options.opened li.selected:first-child {

 background-position: 100% -22px;

}

ul.selectbox-options.opened li {

 display: block;

}

ul.selectbox-options.opened li.selected {

 background-image: none;

}

ul.selectbox-options li.selected {

 display: block;

}

ul.selectbox-options li:hover {

 background-color: #f5f5f5;

}</p>

<p><span style="color:#484848">

</span></p>

<p>  <div id="section">

 <div id="section_1" class="custom-selectbox">

  <ul class="selectbox-options">

   <li class="selected" data-value="" readonly>== 관련 사이트 ==</li>

       <li data-value="#,_self">== 관련 사이트 ==</li>

     </ul>

 </div>

 <div id="section_2" class="custom-selectbox">

  <ul class="selectbox-options">

   <li class="selected" data-value="" readonly>== 관련 사이트 ==</li>

       <li data-value="#,_self">== 관련 사이트 ==</li>

     </ul>

 </div>

 <div id="section_3" class="custom-selectbox">

  <ul class="selectbox-options">

   <li class="selected" data-value="" readonly>== 시/군/구 사이트 ==</li>

       <li data-value="#,_self">== 시/군/구 사이트 ==</li>

     </ul>

 </div>

 <div id="section_4" class="custom-selectbox">

  <ul class="selectbox-options">

   <li class="selected" data-value="" readonly>== 전국 사이트 ==</li>

       <li data-value="#,_self">== 전국 사이트 ==</li>

       <li data-value="#,_self">== 서울특별시 ==</li>

       <li data-value="#,_self">== 경기도 ==</li>

       <li data-value="#,_self">== 강원도 ==</li>

       <li data-value="#,_self">== 충청남도 ==</li>

       <li data-value="#,_self">== 충청북도 ==</li>

       <li data-value="#,_self">== 전라남도 ==</li>

       <li data-value="#,_self">== 전라북도 ==</li>

       <li data-value="#,_self">== 경상남도 ==</li>

       <li data-value="#,_self">== 경상북도 ==</li>

       <li data-value="#,_self">== 제주도 ==</li>

     </ul>

 </div>

</div>

<script>

/**

* Initialize customized selectbox

* @element to apply

**/

$.fn.setCustomizedSelectbox = function() {

 var $selectbox = $(this),

  $optionbox = $selectbox.children("ul.selectbox-options"),

  $options = $optionbox.children("li");

 var isOpened = false;</p>

<p> function _onToggleOptionBox(event) {

  event.stopPropagation();</p>

<p>  var target = event.target;</p>

<p>  if($.inArray(target, $options) !== -1) {

   if(isOpened) return toggleOptionItem(target);

   isOpened = true;

  } else {

   if(!isOpened) return;

   isOpened = false;

  }</p>

<p>  $optionbox.toggleClass("opened");

 }</p>

<p> function _onCloseOptionBox(event) {

  event.stopPropagation();</p>

<p>  var $this = $(this),

   $target = $(event.target);</p>

<p>  if(($.inArray(event.target, $options) !== -1 || $target.is($this)) && isOpened) {

   $optionbox.toggleClass("opened");

   isOpened = false;

  }

 }</p>

<p> function toggleOptionItem(selected) {

  var $selectedItem = $(selected),

   value = $selectedItem.data();

   value = value && value.value || null;

  

  console.log(value);

  // 선택된 아이템의 값을 이곳에서 처리하면 됩니다.

  // form 에 적용한다면 hidden input box 를 만들어서 value 를 업데이트 하거나,

  // 페이지 이동이 필요하면 이곳에서 href relocation 을 처리하면 됩니다. :)</p>

<p>  if(!$selectedItem.hasClass("selected")) {

   $options.removeClass("selected");

   $selectedItem.addClass("selected");

   $selectedItem.trigger("onSorterSelected");

  }</p>

<p>  $selectbox.trigger("click");</p>

<p>  return;

 }</p>

<p> $selectbox.on("click", _onToggleOptionBox);

 $optionbox.on("mouseleave", _onCloseOptionBox);

}</p>

<p>$(document).ready(function() {

 $("#section_1").setCustomizedSelectbox();

 $("#section_2").setCustomizedSelectbox();

 $("#section_3").setCustomizedSelectbox();

 $("#section_4").setCustomizedSelectbox();

});

</script></p>

<p><span style="color:#484848">