Отзывчивый вопрос - HTML

Question

Пожалуйста, ознакомьтесь с приведенным ниже кодом, работая на полном рабочем столе. Когда я пытаюсь проверить его на чувствительном экране, .topHeader не занимает полную ширину. Я пробовал ширину: 100%, но не повезло, пожалуйста, все это исправить. Спасибо.

.clearfix:before, .wrapper:before { 
 
\t display: table; 
 
    content: " "; 
 
} 
 
.clearfix:after, .wrapper:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
    } 
 

 
.topHeader 
 
{ 
 
background-color:#E8999A; 
 
    box-sizing: border-box;} 
 
.wrapper 
 
{ 
 
\t width: 1100px; 
 
\t margin:0px auto; 
 
} 
 
.headerLeft 
 
{ 
 
\t float:left; 
 
} 
 
#logo {padding:20px 0px;} 
 
#logo img {width: 200px;}

<div class="topHeader"> 
 
    \t <div class="wrapper"> 
 
     \t <div class="headerLeft"> 
 
      \t <div id="logo"> 
 
       
 
       </div> 
 
      </div> 
 
      
 
     </div> 
 
    </div> \t 
 
\t <!--End Header -->

Answer 1

Установите ширину .wrapper на 100%, а не 1100px.

Думайте, что сделаете эту работу.

Answer 2

Удалить .wrapper ширина reponsive экрана или сделать его авто:

.wrapper 
{ 
    margin:0px auto; 
} 

Answer 3

Похоже, что все эти люди, которые пытались помочь не мог понять, что именно вы ищете, и то, что это ваша проблема. Вы должны четко объяснить, чего вы пытаетесь достичь.

Дай себе попробовать. Я добавил «min-width: 1100px;» в «topHeader».

И в чем смысл clearfix во фрагменте? Удалите ненужные/несвязанные коды для справки. Это нас путает.

body, html { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.clearfix:before, .wrapper:before { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:after, .wrapper:after {  
 
    clear:both; 
 
    content:" "; 
 
    display:block; 
 
    font-size: 0; 
 
    height: 0; 
 
    visibility: hidden; 
 
} 
 
.topHeader { 
 
    background-color:#E8999A; 
 
    box-sizing: border-box; 
 
    min-width: 1100px; 
 
} 
 
.wrapper { 
 
    margin:0px auto; \t 
 
    width:1100px; 
 
} 
 
.headerLeft { 
 
    float:left; 
 
} 
 
#logo { 
 
    padding:20px 0px; 
 
} 
 
#logo img { 
 
    width:200px; 
 
}

<div class="topHeader"> 
 
    <div class="wrapper"> 
 
    <div class="headerLeft"> 
 
     <div id="logo"></div> 
 
    </div> 
 
    </div> 
 
</div>