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

Question

I'm working on a Wordpress page with WPBakery Page Builder. What I did was extract some html/css from another existing page with SnappySnippet and pasted it to the page inside a "Pure html" block. What happens now is that the content does not adapt all screens. Only my computer's and when it is fullscreen. It's a bit messy. Here's the 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>

Here's the 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*/

Hope you guys can help me, I've tried many things.

Here's the fullscreen view:

Here if I put the browser only on half screen:

Answer 1

Change margin: 0px 265px to margin: 0px auto in your CSS. I'm not sure if you have to work on responsive part as well but this is sure thing you should do first.

Answer 2

Add some media queries in the CSS file and connect to the HTML file

@media only screen and{max-width:}

this is the basic syntax for the media queries in the CSS in the max width section you have to enter the screen sizes of the particular screens and for better guidance you can take the help form developers tools in any of the browsers and then click responsive dimensions then it will show the regular responsive screen sizes