boxing incomplete

good day

My website is at boyantech.com

I’m using this boxing code

php

/* BOXING */
add_action('after_setup_theme', 'tc_boxed');

function tc_boxed(){
  // wrap header elements in a container
  add_action('__header', 'tc_container_wrapper_start', 0);
  add_action('__header', 'tc_container_wrapper_end', 100);

  //wrap fpu elments in a container
  if ( class_exists('TC_front_fpu') ){
    add_action('__before_fp', 'tc_container_wrapper_start', 0);
    add_action('__after_fp', 'tc_container_wrapper_end', 100);
  }

  function tc_container_wrapper_start(){
    $current_filter = current_filter();
    echo '<div class="'.$current_filter.' container">';
  }

  function tc_container_wrapper_end(){
    echo '</div>';
  }

  // apply tc-header borders to our new container
  // and constrain the colophon
  add_filter('tc_user_options_style', 'tc_boxed_style', 11);
  function tc_boxed_style($style){

    $top_border = esc_attr( TC_utils::$inst -> tc_opt('tc_top_border') );

    if ( $top_border == 1 ){

      add_filter('my_header_top_border', 'my_header_top_border');
      function my_header_top_border(){
        //we need the skin color!
        $skin = TC_utils::$inst -> tc_opt('tc_skin');
        $color = TC_init::$instance->skin_color_map[$skin][0];
        return array(
          'border-top: 5px solid' . $color .';',
          'border-top: none;'
        );
      }
    }

    $tb_style = apply_filters('my_header_top_border', array('',''));

    $style .= sprintf('
            .colophon .container { width: 100%%;}
            .tc-no-sticky-header header.tc-header,
            .tc-sticky-header header.tc-header{
                %2$s
                border-bottom: none;
                background: transparent;
            }%3$s
            .tc-sticky-header.sticky-enabled .__header.container {
                /* default fallback */
                background: #ffffff transparent;
                /* nice browsers */
                background: rgba(255, 255, 255, 0.8);
                /* IE 6/7 */
                filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
                /* IE8 */
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
                border-bottom: 2px solid #E9EAEE;
            }
            .tc-no-sticky-header .__header.container,
            .tc-sticky-header.sticky-disabled .__header.container{
                %1$s
                background: white;
                border-bottom: 10px solid #e9eaee;
            }%3$s',
            $tb_style[0],
            $tb_style[1],
            "\n"
    );

    return $style;
  }

  //use row-fluid for the footer/featured_pages and content wrapper
  add_filter('tc_column_content_wrapper_classes', 'row_row_fluid');
  add_filter('tc_footer_widget_area', 'row_row_fluid');
  add_filter('tc_fp_widget_area', 'row_row_fluid');

  function row_row_fluid($classes){
    return preg_replace('/^row$/', 'row-fluid', $classes);

  }
  //constrain footer
  add_filter('tc_footer_classes', 'my_footer_classes');
  function my_footer_classes(){
    return 'container';
  }
}//end BOXING

css

body:not(.single-post) #content > article {
  padding: 10px 20px;
  margin: 0 0 30px;
  background: #ffffff none repeat scroll top left;
  background-image: none;
  border: solid 6px #5BC8B4;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.single-post #content > article {
  padding: 10px 20px;
  margin: 0 0 30px;
  background: #ffffff none repeat scroll top left;
  background-image: none;
  border: solid 6px #5BC8B4;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  

}

#right.widget-area .widget_text{
  padding: 10px 10px;
  margin: 0 0 0px;
  background: #ffffff none repeat scroll top left;
  background-image: none;
  border: solid 5px #5BC8B4;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.my-extra-widget  {
  float: none;
  padding: 10px 20px;
  margin: 0 0 0px;
  background: #ffffff none repeat scroll top left;
  background-image: none;
  border: solid 5px #5BC8B4;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

I also added a top widget area
php

// Adds a widget area.
if (function_exists('register_sidebar')) {
	register_sidebar(array(
	'name' => 'Extra Header Widget Area',
	'id' => 'extra-widget-area',
	'description' => 'Extra widget area after the header',
	'before_widget' => '<div class="widget my-extra-widget">',
	'after_widget' => '</div>',
	'before_title' => '<h2>',
	'after_title' => '</h2>'
	));
}

// Place the widget area after the header
add_action ('__after_header', 'add_my_widget_area', 10);
function add_my_widget_area() {
  if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Extra Header Widget Area');
  }
}

for some reason my top widget area doesn’t follow the boxing pattern; it wider.

it there anyway to make it uniform? any code I can paste?

thanks in advance