Menu icon Foundation
Row width is 62.5rem even in 768px screen

<div class="main-section section-4" data-stellar-background-ratio="0.1">
    <div class="section-content">
        <div class="row">
            <div class="small-12 medium-3 large-4 columns">
                <div class="media-list">
                    <h2><i></i> MEDIA</h2>

                    <ul class="accordion" data-accordion>
                        <li class="accordion-navigation">
                            <a href="#panel1a"><i class="fi-plus"></i> Accordion 1</a>
                            <div id="panel1a" class="content active">
                                <ul>
                                    <li><a href="">Video 1</a></li>
                                    <li><a href="">Video 2</a></li>
                                    <li><a href="">Video 3</a></li>
                                    <li><a href="">Video 4</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="small-12 medium-9 large-8 columns">
                <div class="media-player">
                    <img src="http://placehold.it/1280x720">
                </div>
                <div class="media-slider">
                    <div class="slider-prev left show-for-large-up hide-for-touch"><span class="arrow-left"></span></div>
                    <div class="slider-container">
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                    </div>
                    <div class="slider-next right show-for-large-up hide-for-touch"><span class="arrow-right"></span></div>
                </div>
            </div>
        </div>
    </div>
</div>


I am using owl carousel2 for slider and the conf. is like

var mediaSliderContainer = mediaSlider.find('.slider-container');
mediaSliderContainer.owlCarousel({
margin: 10,
responsiveClass:true,
responsiveBaseElement: ".media-slider",
responsive:{
0:{
items:1
},
480:{
items:2
},
768:{
items:3
}
}
});

Row width is 62.5rem (1000px) in 768px screen. I could not figure out how to make it fit with screen size.

gridrow62.5rem

<div class="main-section section-4" data-stellar-background-ratio="0.1">
    <div class="section-content">
        <div class="row">
            <div class="small-12 medium-3 large-4 columns">
                <div class="media-list">
                    <h2><i></i> MEDIA</h2>

                    <ul class="accordion" data-accordion>
                        <li class="accordion-navigation">
                            <a href="#panel1a"><i class="fi-plus"></i> Accordion 1</a>
                            <div id="panel1a" class="content active">
                                <ul>
                                    <li><a href="">Video 1</a></li>
                                    <li><a href="">Video 2</a></li>
                                    <li><a href="">Video 3</a></li>
                                    <li><a href="">Video 4</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="small-12 medium-9 large-8 columns">
                <div class="media-player">
                    <img src="http://placehold.it/1280x720">
                </div>
                <div class="media-slider">
                    <div class="slider-prev left show-for-large-up hide-for-touch"><span class="arrow-left"></span></div>
                    <div class="slider-container">
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                        <div class="item">
                            <img alt="" src="http://placehold.it/120x90" class="img-responsive">
                        </div>
                    </div>
                    <div class="slider-next right show-for-large-up hide-for-touch"><span class="arrow-right"></span></div>
                </div>
            </div>
        </div>
    </div>
</div>


I am using owl carousel2 for slider and the conf. is like

var mediaSliderContainer = mediaSlider.find('.slider-container');
mediaSliderContainer.owlCarousel({
margin: 10,
responsiveClass:true,
responsiveBaseElement: ".media-slider",
responsive:{
0:{
items:1
},
480:{
items:2
},
768:{
items:3
}
}
});

Row width is 62.5rem (1000px) in 768px screen. I could not figure out how to make it fit with screen size.