Margin and Padding just show white instead of the header

Question

I've been trying to make it so the latest post featured image become the background of the header by moving the background back and moving the widget. The problem is when i tried moving the widget using either margin or padding it just show white instead of moving the actual widget.

Here is the rendered HTML: imgur.com/a/5nLcE/

Here is my code:

Functions.php (not full)

//* Register featured post widget area
genesis_register_sidebar( array(
    'id'            => 'featured-post',
    'name'          => __( 'Featured Post', 'duniayudhis' ),
    'description'   => __( 'This is a widget area that can be placed after the navigation bar', 'duniayudhis' ),
) );

/*  
    remove_action( 'genesis_after_header', 'genesis_do_nav', 5 );
    add_action( 'genesis_before_header', 'genesis_do_nav', 5 );
*/

remove_action( 'genesis_after_header', 'genesis_do_nav', 10 );

front-page.php:

add_action( 'genesis_meta', 'duniayudhis_front_page' );

function duniayudhis_front_page() {

// Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

if( is_active_sidebar('featured-post') ) {

    // Add the featured post widgets
    add_action( 'genesis_header', 'duniayudhis_featured_post', 18);


}

// The function to register the Welcome Area Widget
function duniayudhis_featured_post() {

    genesis_widget_area( 'featured-post', array( 
        'before' => '<div class="featured-post-widget">', 
        'after' => '</div>'
    ));
}

}

style.css (just for the sidebar and header):

/* # Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
    background-color: #212121;
}

.site-header, .wrap {

    max-width: 100%;

}

/* ## Title Area
--------------------------------------------- */

.title-area {
    float: left;
    width: 79px;
}

.header-full-width .title-area {
    width: 100%;
}

.site-title {
    font-size: 32px;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.2;
}

.site-title a,
.site-title a:hover,
.site-title a:focus {
    color: #333;
}

.header-image .site-title > a {
    background: url(images/logo.png) no-repeat left;
    float: left;
    min-height: 79px;
    width: 100%;
    margin-left: 2rem;
}

.site-description {
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.5;
}

.site-description,
.site-title {
    margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
    display: block;
    text-indent: -9999px;
}

/* ## Widget Area
--------------------------------------------- */

.site-header .widget-area {
    float: right;
    text-align: right;
    width: 100% - 79px;
}


/* # Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
    clear: both;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1;
    width: 100%;
}

.genesis-nav-menu .menu-item {
    display: inline-block;
    text-align: left;
}

.genesis-nav-menu a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 30px 24px;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu a:focus,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus  {
    color: #c3251d;
    text-decoration: none;
}

.genesis-nav-menu .sub-menu {
    left: -9999px;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition:    opacity .4s ease-in-out;
    -ms-transition:     opacity .4s ease-in-out;
    -o-transition:      opacity .4s ease-in-out;
    transition:         opacity .4s ease-in-out;
    width: 200px;
    z-index: 99;
}

.genesis-nav-menu .sub-menu a {
    background-color: #fff;
    border: 1px solid #eee;
    border-top: 0;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 20px;
    position: relative;
    width: 20rem;
    word-wrap: break-word;
}

.genesis-nav-menu .sub-menu .sub-menu {
    margin: -55px 0 0 199px;
}

.genesis-nav-menu .menu-item:hover {
    position: static;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
}

.genesis-nav-menu > .first > a {
    padding-left: 0;
}

.genesis-nav-menu > .last > a {
    padding-right: 0;
}

.genesis-nav-menu > .right {
    color: #fff;
    float: right;
    list-style-type: none;
    padding: 30px 0;
}

.genesis-nav-menu > .right > a {
    display: inline;
    padding: 0;
}

.genesis-nav-menu > .rss > a {
    margin-left: 48px;
}

.genesis-nav-menu > .search {
    padding: 10px 0 0;
}

.slicknav_menu {
    display:none;
}

/* ## Site Header Navigation
--------------------------------------------- */

.site-header .sub-menu {
    border-top: 1px solid #eee;
}

.site-header .sub-menu .sub-menu {
    margin-top: -5.6rem;
}

.site-header .genesis-nav-menu li li {
    margin-left: 0;
}

/* ## Primary Navigation
--------------------------------------------- */

.nav-primary {
    position: relative;
    z-index: 100;
}

.nav-primary .genesis-nav-menu a {
    color: #ccc;
    text-decoration: none;
}

.nav-primary .genesis-nav-menu li a:first-child {
    margin-left: 10rem;
    margin-right: -10rem;
}

.nav-primary .genesis-nav-menu a:hover,
.nav-primary .genesis-nav-menu a:focus,
.nav-primary .genesis-nav-menu .current-menu-item > a {
    color: #fff;
    text-decoration: none;
}

.nav-primary .genesis-nav-menu .sub-menu a {
    color: #333;
}

.nav-primary .genesis-nav-menu .sub-menu a:hover,
.nav-primary .genesis-nav-menu .sub-menu a:focus,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a {
    color: #c3251d;
    text-decoration: none;
}

.widget-wrap #genesis-responsive-slider {
    background-color: #fff;
    border: 0px solid #eee;
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    z-index: 1;
    margin-top: -9.5rem;
}

li .slide-image a{

    background: rgba(70, 72, 82, 0.3)

}