Localhost

для оранжевого блока задать height:100%; пробовали?

тут визуально можно поиграть с работой bootstrap.
Чаще всего макет делают по сетке, считаете колонки и помещаете контент по макету.
Если все правильно сделать, то будут элементы адаптивны.

Такой

Owl Carousel

body{
font-style: normal;
font-family: 'Шрифт', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
}

Это тоже перенесено?

<link href="plugins/masterslider/style/masterslider.css" rel="stylesheet">
<link href="plugins/masterslider/skins/default/style.css" rel='stylesheet'>

<script src="plugins/masterslider/masterslider.min.js"></script> 
        <script type="text/javascript">
            $(document).ready(function () {
                var slider = new MasterSlider();
                slider.control('scrollbar', {dir: 'h'});
                slider.control('thumblist', {autohide: false, dir: 'v', arrows: false, align: 'left', width: 127, height: 84, margin: 5, space: 5, hideUnder: 300});
                slider.setup('masterslider', {
                    width: 540,
                    height: 586,
                    space: 5
                });
            });

        </script>

Сам плагин www.masterslider.com

Может поможет готовое решение

Вкладки (tab)
Например

Owl Carousel

#skills {
    max-width: 1000px;
    margin: 0 auto;
    /* overflow: hidden; */
     display: inline-block;
    justify-content: space-between;
}

svg поможет с положением и top

если грубо то так
https://jsfiddle.net/9fz3o8bL/

Думаю да, прописать css для разных браузеров.

background: rgb(19,28,39); /* Все браузеры*/
background: -moz-linear-gradient(left,  rgba(19,28,39,1) 0%, rgba(65,37,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(19,28,39,1) 0%,rgba(65,37,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(19,28,39,1) 0%,rgba(65,37,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131c27', endColorstr='#412513',GradientType=1 ); /* IE6-9 */

Например так

<div id="google-map">
         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1271.5411177276196!2d30.54607475818814!3d50.402304994867194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4cf5a6ac94fe7%3A0x441355015fb9c6fe!2sSaperno-Slobidska+St%2C+57%2C+Kyiv%2C+Ukraine!5e0!3m2!1sen!2sru!4v1478369015237" 
          width="600" 
          height="450" 
          frameborder="0" 
          style="border:0"
          align="left"
          allowfullscreen></iframe>
          </div>

#google-map iframe{
margin-left:20px;
}

туда же можно перетащить все стили

Нудно но понятно
https://www.youtube.com/watch?v=7akPICFR-AI

shoelace.io Здесь удобно собрать блоки и сбоку будет готовый код

пропиши для тега стили например font-size:16px;

p{
font-size:16px;
}

___________________
или так

<p class="text-1">This template has a responsive menu toggling system. ...... </p>

а в стили пропиши

.text-1{
font-size:16px;
}

_________________
или так

body {
    overflow-x: hidden;
    font-size:16px;
 }

А если требуется для разных экранов пиши разные размеры шрифта НАПРИМЕР

#page-content-wrapper{
font-size:16px;}

@media(min-width:768px) {
#page-content-wrapper{
font-size:17px;}
}

или есть еще куча вариантов)