왜 가운데 정렬이 안될까요 ㅠ?

#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;

}
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;
}

<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;

 function _onToggleOptionBox(event) {
  event.stopPropagation();

  var target = event.target;

  if($.inArray(target, $options) !== -1) {
   if(isOpened) return toggleOptionItem(target);
   isOpened = true;
  } else {
   if(!isOpened) return;
   isOpened = false;
  }

  $optionbox.toggleClass("opened");
 }

 function _onCloseOptionBox(event) {
  event.stopPropagation();

  var $this = $(this),
   $target = $(event.target);

  if(($.inArray(event.target, $options) !== -1 || $target.is($this)) && isOpened) {
   $optionbox.toggleClass("opened");
   isOpened = false;
  }
 }

 function toggleOptionItem(selected) {
  var $selectedItem = $(selected),
   value = $selectedItem.data();
   value = value && value.value || null;
  
  console.log(value);
  // 선택된 아이템의 값을 이곳에서 처리하면 됩니다.
  // form 에 적용한다면 hidden input box 를 만들어서 value 를 업데이트 하거나,
  // 페이지 이동이 필요하면 이곳에서 href relocation 을 처리하면 됩니다. :)

  if(!$selectedItem.hasClass("selected")) {
   $options.removeClass("selected");
   $selectedItem.addClass("selected");
   $selectedItem.trigger("onSorterSelected");
  }

  $selectbox.trigger("click");

  return;
 }

 $selectbox.on("click", _onToggleOptionBox);
 $optionbox.on("mouseleave", _onCloseOptionBox);
}

$(document).ready(function() {
 $("#section_1").setCustomizedSelectbox();
 $("#section_2").setCustomizedSelectbox();
 $("#section_3").setCustomizedSelectbox();
 $("#section_4").setCustomizedSelectbox();
});
</script>