Report

Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
<div class="banner"> 
      <div class="container background-image">
      <div class="banner_text"></div>
      </div>
    </div>
CSS:
.background-image {
  background-image: url('/img/new_oranges.jpg');
  background-size: cover;
  height: 200px;
}

Здравствуйте,  я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
Ниже HTML и CSS код:
<header>
            <div class="header">
                <div class="wrap">
                    <div class="logo header_left">
                        <a href="#">
                            <img src="images/logo.png" alt="Логотип">
                        </a>
                    </div>
                    <div class="header_right">
                        <div id="topmenu">
                            <p>
                                <a href="#">About</a>
                                <span>/</span>
                                <a href="#">Blog</a>
                                <span>/</span>
                                <a href="#">Contact</a>
                                <span>/</span>
                            </p>
                        </div>
                        <div id="social">
                            <a class="twitter" href="#"></a>
                            <a class="vimeo" href="#"></a>
                            <a class="facebook" href="#"></a>
                            <a class="instagram" href="#"></a>
                            <a class="dribbble" href="#"></a>
                            <a class="reddit" href="#"></a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
——————————————————————————————————————————————————--
#container {
    margin: 0 auto;
}
#container .header {
    border-bottom: 1px solid #bfbfbf;
    box-shadow: 0 0 3px #dbdbdb;
    padding-top: 6px;
}
#container .header .wrap {
    display: flex;
    justify-content: space-between;
    padding: 0;
}
@media (max-width: 650px) {
    .header .wrap {
        flex-direction: column;
        padding: 0 3px;
        margin-bottom: 5px;
    }
    
    .header #socials {
        margin-left: 5px;
    }
    
    .header #socials a:last-child {
        margin-right: 2px;;
    }
}
#container .header .header_left {
    align-self: center;
}
#container .header .header_right {
    display: flex;
    justify-content: space-between;
}
#container #topmenu {
    color: #8e8e8e;
    padding-top: 6px;
}
#container #topmenu a {
    color: #8e8e8e;
    text-decoration: none;
}
#container #topmenu a:hover {
    color: #dd5555;
}
#container #social {
    display: flex;
    margin-left: 20px;
    margin-right: 50px; 
}
#social a {
    margin-top: 9px;
    margin: 8px  10px;
    
}
.twitter {
    background: url("../images/twitter_un.png") no-repeat;
    height: 11px;
    width: 13px;
    cursor: pointer;
}
.twitter:hover {
    background: url("../images/twitter.png") no-repeat;
    height: 11px;
    width: 13px;
} 
.dribbble {
    background: url("../images/dribbble_un.png") no-repeat;
    height: 13px;
    width: 13px;
    cursor: pointer;
} 
.dribbble:hover {
    background: url("../images/dribbble.png") no-repeat;
    height: 13px;
    width: 13px;
} 
.vimeo {
    background: url("../images/vimeo_un.png") no-repeat;
    height: 12px;
    width: 13px;
    cursor: pointer;
} 
.vimeo:hover {
    background: url("../images/vimeo.png") no-repeat;
    height: 12px;
    width: 13px;
} 
.facebook {
    background: url("../images/facebook_un.png") no-repeat;
    height: 13px;
    width: 7px;
    cursor: pointer;
} 
.facebook:hover {
    background: url("../images/facebook.png") no-repeat;
    height: 13px;
    width: 7px;
} 
.instagram {
    background: url("../images/instagram_un.png") no-repeat;
    height: 12px;
    width: 12px;
    cursor: pointer;
} 
.instagram:hover {
    background: url("../images/instagram.png") no-repeat;
    height: 12px;
    width: 12px;
} 
.reddit {
    background: url("../images/reddit_un.png") no-repeat;
    height: 11px;
    width: 13px;
    cursor: pointer;
} 
.reddit:hover {
    background: url("../images/reddit.png") no-repeat;
    height: 11px;
    width: 13px;
} 

Здравствуйте. Вопрос по следующей вёрстке:
<!DOCTYPE html>
<html lang="ru">
    <head>
    <style>
        .left{
            float:left;
            background:red;
            }
            
            .no_float
            {
                background:green;
                text-align:center;
                font-size:30px;
                }
                
        </style>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
    </head>
    <body>
<div class="left">
    float:leftrvrcrvrvr
    </div>
    
    <div class="no_float">
    hidbibd
    </div>
    
</body>
</html>
 
Почему текст в блоке с классом no_float не выравнивается по центру, хотя в css это прописывается? 

Коллеги, может это я слишком часто натыкаюсь на такое, но почему-то все дизайнеры, поголовно, делают psd темплейт для мобильной версии сайта шириной в 900px, или 700 или 800.
Почемууу? Ширина айфона 320, андроида 360, я обычно на такие цифры равняюсь. Ну ладно, можно допустить, что есть более широкие мобильные разрешения, но не делать же темплейт мобильной версии шириной в 900px!!!??? 
Почему они так поступают и что с этим делать?
Спасибо

Здравствуйте! 
Пожалуйста, помогите решить проблему. 
Никак не могу прижать (оранжевый) float элемент с классом .text, к нижней границе (желтого) родителя с классом .main
Пример: http://codepen.io/Econavi/pen/bgBXLp