html内容不适应不同的屏幕尺寸

Question

我正在使用 WPBakery Page Builder 开发 Wordpress 页面。我所做的是使用 SnappySnippet 从另一个现有页面中提取一些 html/css，并将其粘贴到“纯 html” block 内的页面。现在发生的情况是内容无法适应所有屏幕。只有我的电脑和全屏时。有点乱。这是 html:

<div id="DIV_1">
<div id="DIV_2">
    <div id="DIV_3">
        <div id="DIV_4">
            ALGUNAS
        </div>
        <div id="DIV_5">
            REFLEXIONES
        </div>
        <div id="DIV_6">
            PREVIAS
        </div>
    </div>
</div>
<div id="DIV_7">
    <div id="DIV_10">
        ¿Si tu coche se avería, por qué acudes al mecánico y no al 
dentista ?.
    </div>
</div>
<div id="DIV_11">
    <div id="DIV_14">
        ¿Eres consciente de que vas a poner a la venta tu patrimonio y 
el de los tuyos ?, ¿ estás dispuesto a jugártela ?.
    </div>
</div>
<div id="DIV_15">
    <div id="DIV_18">
        ¿Eres un profesional inmobiliario ?, ¿ cuentas con elementos 
necesarios para fijar el precio de tu vivienda ?, ¿ sabes cuánto pedir 
por ella ?.
    </div>
</div>
<div id="DIV_19">

    <div id="DIV_22">
        ¿Sabes cómo atraer compradores de verdad y evitar curiosos ?, ¿ 
permitirías la entrada a tu casa a cualquier persona, sin control ?·
    </div>
</div>
<div id="DIV_23">

    <div id="DIV_26">
        ¿Dispones de tiempo libre para enseñar tu piso ?, ¿ estás 
dispuesto a asumir las molestias e inconvenientes que esto supone ?.
    </div>
</div>
<div id="DIV_27">

    <div id="DIV_30">
        ¿Tienes argumentos para defender el precio de tu propiedad?, 
¿eres experto negociador inmobiliario?.
    </div>
</div>
<div id="DIV_31">
    <div id="DIV_34">
        ¿Conoces todo el tema contractual que conlleva unas Arras o 
Contrato Privado y los aspectos legales y administrativos de la venta 
?.
    </div>
</div>
<div id="DIV_35">
    EN DEFINITIVA,
</div>
<div id="DIV_36">
    ¿CREES QUE MERECE LA PENA ARRIESGARTE EN LA VENTA DE TU VIVIENDA?
</div>
</div>

这是CSS:

#DIV_1 {
max-width:100%;
padding-top: 30px;
color: rgb(51, 51, 51);
display: table;
height: 455px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 227.5px;
transform-origin: 575px 227.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 0px 265px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1*/

#DIV_2 {
color: rgb(51, 51, 51);
float: left;
height: 210px;
text-align: center;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 299px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 149.5px 105px;
transform-origin: 149.5px 105px;
caret-color: rgb(51, 51, 51);
background: rgb(102, 102, 102) none repeat scroll 0% 0% / auto padding- 
box border-box;
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 0px 30px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_2*/


#DIV_3 {
bottom: -105px;
color: rgb(51, 51, 51);
height: 190px;
left: 149.5px;
position: relative;
right: -149.5px;
text-align: center;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
top: 105px;
width: 236px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 118px 95px;
transform-origin: 118px 95px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: -95px 0px 0px -118px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_3*/



#DIV_4 {
color: rgb(204, 204, 204);
display: inline-block;
height: 48px;
letter-spacing: 0px;
text-align: center;
text-decoration: none solid rgb(204, 204, 204);
text-rendering: optimizelegibility;
width: 240px;
column-rule-color: rgb(204, 204, 204);
perspective-origin: 118px 24px;
transform-origin: 118px 24px;
caret-color: rgb(204, 204, 204);
border: 0px none rgb(204, 204, 204);
font: normal normal 600 normal 48px / 48px "Open Sans", sans-serif;
margin: 20px 0px 0px;
outline: rgb(204, 204, 204) none 0px;
}/*#DIV_4*/



#DIV_5 {
color: rgb(204, 204, 204);
display: inline-block;
height: 26px;
letter-spacing: 3px;
text-align: center;
text-decoration: none solid rgb(204, 204, 204);
text-rendering: optimizelegibility;
width: 236px;
column-rule-color: rgb(204, 204, 204);
perspective-origin: 118px 13px;
transform-origin: 118px 13px;
caret-color: rgb(204, 204, 204);
border: 0px none rgb(204, 204, 204);
font: normal normal 600 normal 26px / 26px "Open Sans", sans-serif;
margin: 12px 0px 0px;
outline: rgb(204, 204, 204) none 0px;
}/*#DIV_5*/


#DIV_6 {
color: rgb(255, 255, 255);
display: inline-block;
height: 36px;
letter-spacing: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-rendering: optimizelegibility;
width: 236px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 118px 18px;
transform-origin: 118px 18px;
caret-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal 400 normal 36px / 36px "Open Sans", sans-serif;
margin: 20px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_6*/


#DIV_7 {
color: rgb(51, 51, 51);
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 14px;
transform-origin: 575px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_7*/



#DIV_8, #DIV_12, #DIV_16, #DIV_20, #DIV_24, #DIV_28, #DIV_32 {
color: rgb(51, 51, 51);
float: left;
height: 24px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 24px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 13px 13px;
transform-origin: 13px 13px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(51, 51, 51);
border-radius: 50% 50% 50% 50%;
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8, #DIV_12, #DIV_16, #DIV_20, #DIV_24, #DIV_28, #DIV_32*/



#I_9, #I_13, #I_17, #I_21, #I_25, #I_29, #I_33 {
bottom: 0px;
color: rgb(51, 51, 51);
left: 9px;
position: relative;
right: -9px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
top: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#I_9, #I_13, #I_17, #I_21, #I_25, #I_29, #I_33*/



#DIV_10 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 500px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 255px 14px;
transform-origin: 255px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_10*/



#DIV_11, #DIV_15, #DIV_19 {
color: rgb(51, 51, 51);
height: 56px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 28px;
transform-origin: 575px 28px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 15px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_11, #DIV_15, #DIV_19*/



#DIV_14, #DIV_18 {
color: rgb(51, 51, 51);
display: table-cell;
height: 56px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 785px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 397.5px 28px;
transform-origin: 397.5px 28px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_14, #DIV_18*/


#DIV_22 {
color: rgb(51, 51, 51);
display: table-cell;
height: 56px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 785px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 397.5px 28px;
transform-origin: 397.5px 28px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_22*/



#DIV_23, #DIV_27, #DIV_31 {
color: rgb(51, 51, 51);
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 14px;
transform-origin: 575px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 15px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_23, #DIV_27, #DIV_31*/


#DIV_26 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 934px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 472px 14px;
transform-origin: 472px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_26*/



#DIV_30 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 753px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 381.5px 14px;
transform-origin: 381.5px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_30*/


#DIV_34 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 972px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 491px 14px;
transform-origin: 491px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_34*/


#DIV_35 {
color: rgb(51, 51, 51);
height: 30px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 15px;
transform-origin: 575px 15px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 30px / 30px "Open Sans", sans-serif;
margin: 20px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_35*/



#DIV_36 {
color: rgb(51, 51, 51);
height: 25px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 12.5px;
transform-origin: 575px 12.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 25px / 25px "Open Sans", sans-serif;
margin: 10px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_36*/

希望你们能帮助我，我已经尝试了很多东西。

这是全屏 View :

这里如果我把浏览器只放在半屏上:

Answer 1

在您的 CSS 中将 margin: 0px 265px 更改为 margin: 0px auto。我不确定您是否也必须处理响应部分，但这是您首先应该做的事情。