Как центрировать элемент div в мобильных устройствах с помощью медиазапросов CSS

Question

Мне нужно центрировать элемент div для мобильных устройств. Это мой сайт: http://transporttest.cba.pl/ На мобильных устройствах описание div идет влево. Я пытаюсь использовать медиа-запросы, но это не работает. Что я делаю не так? На ПК все ок. Это фрагмент моего кода:

HTML:
    <div id="opis">
        <h2>
        <p style="line-height: 3cm; ">
        &#9830; Od 1991 roku w branży. <br/>
        &#9830; 9 zestawów (ciągnik+ naczepa firanka, colimulde). <br/>
        &#9830; Uprawnienia ADR u każdego kierowcy.<br/>
        &#9830; Warsztat obsługujący auta ciężarowe.<br/>
        </p>
    </div>

CSS:

#opis
{
    font-size: 25px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #F2F3F7;
    height: auto;
    width:72%;
    display:inline-block;
    text-align:center;
}
#container
{   
    text-align: center;
    width:100%;
}

@media all and (max-width: 768px) {
    #container{
        wiidth:100%;
    }
    #opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt 
    {
        left:25%;
        top:25%;
        position:absolute;
        width:50%;
        text-align:center;
    }
    #menudol{
        text-align:center;
         display: block;
  margin: 0 auto;
    }
}

@media all and (max-width:640px){
    #container{
        wiidth:100%;
    }
    #opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt 
    {
        width:72%;
        height:auto;
        display:inline-block;
        text-align:center;
    margin: 0 auto;
    }
    #menudol{
        text-align:center;
         display: block;
  margin: 0 auto;
    }

}

Answer 1

Чтобы медиа-запросы работали, вам нужно включить:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Между тегами.

https://www.w3schools.com/css/css_rwd_viewport.asp

Answer 2

Как кто-то уже прокомментировал, убедитесь, что вы исправили "wiidth" на "width", и вы можете попробовать установить ширину в div, который вы хотите центрировать, и затем добавить:

margin-left:auto;
margin-right:auto;

центрировать его на странице.

Answer 3

Во-первых, используйте <meta name="viewport" content="width=device-width, initial scale= 1.0">

Так как он автоматически подгонит вашу веб-страницу под ширину устройства.

Во-вторых, вы должны использовать margin-left=auto; margin-right=auto;

Это сделает содержимое вашей веб-страницы в центре экрана устройства.

Вы также можете использовать text-align="center"если это работает для вас.

PS The <meta name=viewport> должны определенно использоваться в веб-страницах, поскольку это помогает дизайнеру автоматически форматировать веб-страницу в соответствии с шириной экрана.