Slider is to the right of header instead of under it, on mobile

I have my front page widgetized, in seperate areas going up and down the page.

I dont know how they are aligned, I couldnt seem to figure out how to put them side by side, So (resourceful as i am) I just ran with it.

I only have one problem:

Im using a simple vslider at the top of the front page as a simple content slider. works well and I love how it looks. unfortunately on my mobile device (android) the slider is completely outside the content, off to the right of the header instead of under it as if there is another page (horizontally). I just dont know enough code to fix it. Please help me ??

NOTE:On chrome it works perfectly fine, so i didnt notice right away

See here: https://www.lightsoutfestival.com

Im sure its simple

Here is the relevant code:

FUNCTIONS.PHP

register_sidebars( 1,
	array(
		'name' => 'widgetized-under-slider',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>'
	)
);

MAININDEX.PHP

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("widgetized-under-slider") ) : ?>
<?php endif; ?>

I really dont know what most of it means, just where to place it. If i do an embed instead of using the widgets panel will it be fixed?? :/

what do you think?