Как убрать белую полосу при уменьшении масштаба страницы?

153
17 марта 2019, 14:40

* { 
    padding: 0; 
    margin: 0; 
 
 
} 
 
body { 
    font-family: Open Sans, sans-serif; 
 
} 
 
 
header { 
    background: url(../background.jpg) no-repeat bottom; 
    background-size: cover; 
    position: relative; 
    min-width: 120px; 
 
 
 
} 
 
 
.container { 
 
    margin: 0% 16%; 
    position: relative; 
 
 
} 
 
.top_line { 
    height: 80px; 
    background: white; 
    opacity: 0.7; 
 
    position: relative; 
} 
 
 
.clearfix::after { 
    content: ''; 
    display: table; 
    width: 100%; 
    clear: both; 
 
} 
 
 
 
 
.menu { 
    display: block; 
    padding-top: 36px; 
} 
 
.menu li { 
    display: block; 
    float: left; 
    font-size: 14px; 
    margin-left: 60px; 
} 
 
.menu a { 
    color: #979b9b; 
    text-decoration: none; 
 
} 
 
.menu a:hover { 
    color: #eb435c; 
} 
 
.help { 
 
    border: 1px solid #eb435c; 
    border-radius: 20px; 
    text-decoration: none; 
    font-size: 10px; 
    color: #eb435c; 
    text-transform: uppercase; 
    padding: 10px 20px; 
    position: absolute; 
    top: 30%; 
    right: 3%; 
 
} 
 
.blackout { 
    position: relative; 
    height: 660px; 
 
 
 
} 
 
.blackout:before { 
    content: ''; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    right: 0%; 
    bottom: 0%; 
    background-color: rgba(0, 0, 0, 0.3); 
 
} 
 
.arrow { 
    position: absolute; 
    /* Абсолютное позиционирование */ 
 
 
    border: 15px solid transparent; 
    /* Прозрачные границы */ 
    border-top: 15px solid white; 
    /* Добавляем треугольник */ 
    bottom: 0%; 
    right: 50%; 
} 
 
.titles { 
    position: absolute; 
    z-index: 1; 
    width: 40%; 
    top: 35%; 
    left: 32%; 
 
 
 
 
 
} 
 
.titles h1 { 
    color: white; 
    text-shadow: 1px 1px 2px black; 
    font-size: 40px; 
 
    text-align: center; 
 
 
} 
 
 
.information { 
    position: relative; 
 
} 
 
.order_title { 
    font-size: 25px; 
    color: #eb435c; 
    text-align: center; 
    position: relative; 
} 
 
h2 { 
    font-size: 25px; 
    color: #eb435c; 
    text-align: center; 
 
} 
 
.information p { 
    font-size: 14px; 
    color: #858584; 
 
    text-align: center; 
    font-weight: bolder; 
    width: 59%; 
    line-height: 2.0em; 
    position: absolute; 
    top: 200%; 
    left: 21%; 
 
 
 
 
 
 
 
} 
 
.orders { 
    margin-top: 250px; 
    margin-bottom: 80px; 
    display: flex; 
    justify-content: center; 
 
} 
 
.orders_item { 
    width: 254px; 
    color: #858584; 
    text-align: center; 
    font-weight: lighter; 
    font-size: 13px; 
    padding-right: 40px; 
 
 
 
} 
 
 
.orders_item img { 
    padding-bottom: 15px; 
} 
 
.orders_item h3 { 
    color: #eb435c; 
    padding-bottom: 19px; 
 
 
 
 
 
 
 
} 
 
.number { 
    color: #45d3ce; 
    font-size: 20px; 
    display: block; 
    float: left; 
    position: absolute; 
    top: -10%; 
    left: -24%; 
 
} 
 
.people { 
    display: block; 
    position: relative; 
    margin-left: 55px; 
} 
 
 
.about_text { 
    width: 260px; 
 
} 
 
 
 
.grey { 
    background-color: #f4f6f8; 
 
 
 
} 
 
.search { 
    padding-top: 90px; 
    padding-bottom: 70px; 
} 
 
.information_all { 
    margin-top: 25px; 
    font-size: 14px; 
    color: #858584; 
 
    text-align: center; 
    font-weight: bolder; 
    width: 750px; 
    line-height: 2.0em; 
 
 
} 
 
.all_items { 
    width: 770px; 
    height: 100px; 
    margin: 0% auto; 
} 
 
.buttons { 
    margin-top: 80px; 
    display: flex; 
    justify-content: center; 
 
 
} 
 
.search_item { 
 
    border: 1px solid #eb435c; 
    border-radius: 20px; 
    text-decoration: none; 
    font-size: 10px; 
    color: #eb435c; 
    text-transform: uppercase; 
    text-align: center; 
    padding: 10px 50px; 
    margin-right: 30px; 
 
} 
 
.buttons a:first-child { 
 
    padding: 10px 40px; 
 
} 
 
.search_item:hover { 
    background-color: #eb435c; 
    color: white; 
    transition: all .2s linear; 
} 
 
.clock_item { 
    background-color: white; 
    border-radius: 5px; 
    box-shadow: -12px 10px 20px -15px rgba(0, 0, 0, .2); 
    margin-top: 70px; 
    height: 370px; 
    width: 260px; 
    float: left; 
    margin-left: 30px 
} 
 
.clock_item img { 
    height: 180px; 
    padding-top: 4px; 
 
} 
 
.clocks_center { 
    padding-left: 15px; 
    width: 245px; 
 
} 
 
.clock_item:last-child { 
    float: right; 
 
 
 
} 
 
.clocks { 
 
 
    display: flex; 
    justify-content: center; 
 
} 
 
.text h6 { 
    padding-top: 15px; 
    font-weight: 500; 
    text-align: center; 
    text-transform: uppercase; 
 
} 
 
.text span { 
    color: #eb435c; 
} 
 
.all_presents { 
    text-align: center; 
    margin-top: 70px; 
} 
 
.search_presents { 
 
    border: 1px solid #eb435c; 
    border-radius: 20px; 
    text-decoration: none; 
    font-size: 10px; 
    color: #eb435c; 
    text-transform: uppercase; 
    text-align: center; 
    padding: 10px 50px; 
} 
 
.contacts h2 { 
    font-size: 25px; 
    color: #eb435c; 
    text-align: left; 
 
 
} 
 
.contacts .adress { 
    padding-top: 20px; 
    font-weight: bold; 
    float: left; 
    font-size: 13px; 
 
} 
 
.contacts h3 { 
    color: #858584; 
    font-weight: lighter; 
    font-size: 13px; 
 
} 
 
.contacts { 
    padding-top: 80px; 
    width: 240px; 
 
} 
 
.adress h3:nth-of-type(1) { 
    color: black; 
} 
 
footer { 
    position: relative; 
} 
 
.map img { 
    width: 60%; 
    position: absolute; 
    top: 0%; 
    right: 0%; 
}
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <title>Document</title> 
    <link rel="stylesheet" href="css/main.css"> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
    <link rel="stylesheet" href="css/media.css"> 
</head> 
 
<body> 
    <header class="header"> 
 
 
        <div class="top_line"> 
            <div class="container"> 
 
 
 
                <nav> 
                    <ul class="menu"> 
                        <li><a href="#">Главная</a></li> 
                        <li><a href="#">Премущества</a></li> 
                        <li><a href="#">Каталог</a></li> 
                        <li><a href="#">Отзывы</a></li> 
                        <li><a href="#">Контакты</a></li> 
                        <li><a href="#">Корзина</a></li> 
                    </ul> 
                </nav> 
 
 
 
            </div> 
            <a href="" class="help">Помогите выбрать</a> 
        </div> 
        <div class="blackout"> 
            <div class="titles"> 
                <h1>Ваш дедушка мороз живет у нас! 
                    Покупайте подарки для детей и взрослых в одном месте!</h1> 
            </div> 
            <div class="arrow"> 
 
            </div> 
        </div> 
 
 
 
 
 
    </header> 
 
 
 
 
 
 
 
 
 
 
    <section> 
        <div class="container"> 
            <div class="information "> 
                <div class="order_title">Почему заказывают у нас?</div> 
                <p>Хорошие подарки на новый год не так просто найти.Мы предлагаем лучшее.В прошлом году у нас было больше 9435 тысячи заказов из всех уголков Беларуси, каждый клиент остался доволен, обращайтесь и Вы!</p> 
            </div> 
 
            <div class="orders"> 
                <div class="orders_item "> 
                    <img src="./order-icon1.jpg" alt=""> 
                    <h3>Больше-дешевле</h3> 
                    <p class="about_text">Скидки до 10%! 1 подарок-1%; 
                        2 подарок-2%; и так до 10%.<br> 
                        Нужна большая скидка-звоните.</p> 
                </div> 
                <div class="orders_item"> 
                    <img src="./order-icon2.jpg" alt=""> 
                    <h3>Работа без посредников</h3> 
                    <p class="about_text">Вся продукция идет напрямую от производителя, а это значит, что мы не ставим наценок на товар</p> 
                </div> 
                <div class="orders_item"> 
                    <img src="./order-icon3.jpg" alt=""> 
                    <h3>Быстрая доставка</h3> 
                    <p class="about_text">Быстрая доставка в любые регионы Беларуси за 3 дня, по Минску-доставляем в день заказа.</p> 
                </div> 
                <div class="orders_item"> 
                    <img src="./order-icon4.jpg" alt=""> 
                    <h3 class="people"> <span class="number">9435</span> счастливых покупателей</h3> 
                    <p class="about_text">У нас вы найдете подарки для взрослых и детей. Чего-то не нашли? Постараемся помочь, звоните!</p> 
                </div> 
            </div> 
        </div> 
    </section> 
 
 
 
 
 
 
 
 
 
    <section> 
        <div class="grey"> 
            <div class="container"> 
 
                <div class="search"> 
                    <div class="all_items"> 
                        <h2>А вот и то, что Вы ищете!</h2> 
                        <p class=information_all>Весь ассортимент нашего магазина к вашим услугам. Подарки на новый год- это выражение любви и уважения, помните об этом и выбирайте!</p> 
                    </div> 
                    <div class="buttons"> 
                        <a href="" class="search_item">Весь перечень</a> 
                        <a href="" class="search_item">Мужские</a> 
                        <a href="" class="search_item">Женские</a> 
                        <a href="" class="search_item">Детские</a> 
                    </div> 
                    <div class="clocks"> 
                        <div class="clock_item"> 
                            <img src="./clock1.jpg" alt=""> 
                            <div class="text"> 
                                <h6>Часы <span>Breitling Navitimer</span></h6> 
                                <h6>Цена <span>45рублей</span></h6> 
                            </div> 
                        </div> 
                        <div class="clock_item"> 
                            <img src="./clock2.jpg" alt="" class="clocks_center"> 
                            <div class="text"> 
                                <h6>Часы <span>Breitling Navitimer</span></h6> 
                                <h6>Цена <span>45рублей</span></h6> 
                            </div> 
                        </div> 
                        <div class="clock_item"> 
                            <img src="./clock3.jpg" alt=""> 
                            <div class="text"> 
                                <h6>Часы <span>Breitling Navitimer</span></h6> 
                                <h6>Цена <span>45рублей</span></h6> 
                            </div> 
                        </div> 
                        <div class="clock_item"> 
                            <img src="./clock4.jpg" alt="" class="clocks_center"> 
                            <div class="text"> 
                                <h6>Часы <span>Breitling Navitimer</span></h6> 
                                <h6>Цена <span>45рублей</span></h6> 
                            </div> 
                        </div> 
                    </div> 
                    <div class="all_presents"> 
                        <a href="" class="search_presents">Все подарки</a> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </section> 
 
 
 
    <footer> 
 
        <div class="container"> 
            <div class="contacts"> 
                <h2>Контакты</h2> 
                <div class="adress"> 
                    <h3>Адрес</h3> 
                    <h3>220035 г.Минск, ул.Чичурина, 24-160</h3> 
                </div> 
                <div class="adress"> 
                    <h3>Адрес</h3> 
                    <h3>220035 г.Минск, ул.Чичурина, 24-160</h3> 
                </div> 
            </div> 
        </div> 
        <div class="map"> 
            <img src="map.jpg" alt=""> 
        </div> 
 
 
    </footer> 
</body> 
 
</html>

При уменьшении страницы появляется отступ, чем больше уменьшаешь, тем больше отступ.

Как решить?

Answer 1

Просмотрев вашу проблему могу посоветовать используйте(изучите) bootstrap.

А что касается вашего вопроса в <div class="orders"> для класса orders_item необходимо переписать стили, для начала избавьтесь от фиксированного width:

.orders_item {
    width: 25%;
    color: #858584;
    text-align: center;
    font-weight: lighter;
    font-size: 13px;
    box-sizing: border-box;
    padding: 0 10px;
}
 .about_text {
    width: 100%;
}
.people {
    display: block;
    position: relative;
    /* margin-left: 55px; */
}

Для класса clock_item сделайте аналогично.

.clock_item {
    width: 25%;
}
.clock_item img {
    width: 100%;
}

Возможно этих исправлений будет достаточно...

READ ALSO
Не работает анимация в первом столбце

Не работает анимация в первом столбце

В первом столбце описание полей, во втором значенияПо нажатии одной из трех кнопок именяется значения во втором столбце

143
Как правильно сделать полигоны в html

Как правильно сделать полигоны в html

Всех приветствуюТут недавно столкнулся с SVG графикой, необходимо сделать одну фигуру

263
Как поместить variable в colspan

Как поместить variable в colspan

Есть вот такой кусок кода :

172