Не центрируются элементы, почему?

Question

Если включить F12 и включить toggle devie toolbar то элементы перестают центрироваться, почему?

* {
    padding: 0;
    margin: 0;
}

a{
    color: black;
}

body{
    background-color: #e7f0d9;
}

header{
    display: flex;
}

._Header{
    background-color: #f2f2f2;
    height: 200px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    border-style: dotted;
    border-color: #2f528f;
    border-width: 5px;
}

ul{
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
    margin-top: 5%;
}

li{
    display: inline;
    text-decoration: underline;
    padding: 125px;
}

.site_name{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin: 10px;
    font-size: 20pt;
    font-weight: bold;
}

.topic_holder{
    width: 95%;
    height: 20%;
    background-color: #4472c4;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
}

.topic_holder_ul{
    text-align: center;
    font-weight: normal;
    font-size: 20pt;
    margin-top: 30px;
    line-height: 70px;
}

.topic_holder_li{
    display: inline;
    padding: 220px;
    text-decoration: none;
}

.content_holder{
    width: 95%;
    height: 40%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    border-color: #2f528f;
    border-style: solid;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    font-size: 20pt;
}

.picture{
    width: 400px;
    height: 250px;
    float: left;
    margin: 7px 7px 7px 0;
}

@media screen and (max-width: 1200px){
    body{
        display: flex;
        flex-wrap: wrap;
    }
    
    ._Header{
        height: 75%;
        left: 50%;
        box-sizing: border-box;
        flex-wrap: wrap;
        display: block;
    }

    .content_holder{
        overflow-x: hidden;
    }

    .topic_holder{
        display: none;
    }

    li{
        display: block;
        padding: 0px;
    }

}


@media print {
    ._Header{
        display: none;
    }

    .topic_holder{
        display: none;
    }

    .site_name{
        display: none;
    }

    .content_holder{
        border: none;
        height: 100%;
        overflow-x: visible;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="_Header">
                <ul>
                    <li><a target="_blank" href=" ">ССЫЛКА 1</a></li>
                    <li><a target="_blank" href=" ">ССЫЛКА 2</a></li>
                    <li><a target="_blank" href=" ">ССЫЛКА 3</a></li>
                    <li><a target="_blank" href=" ">ССЫЛКА 4</a></li>
                </ul>
            </div>
        </header>
        <div class="site_name">
            НАЗВАНИЕ САЙТА
        </div>
        <div class="topic_holder">
            <ul class="topic_holder_ul">
                <li class="topic_holder_li">&#128900; Заголовок</li>
                <li class="topic_holder_li">&#128900; Заголовок</li>
                <li class="topic_holder_li">&#128900; Заголовок</li>
                <li class="topic_holder_li">&#128900; Заголовок</li>
                <li class="topic_holder_li">&#128900; Заголовок</li>
                <li class="topic_holder_li">&#128900; Заголовок</li>
            </ul>
        </div>
        <div class="content_holder">
            <p><img src="picture.jpg" class="picture"> Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                Текст Текст</p>
        </div>
    </body>
</html>

БЛОГ НА HUSL

Не центрируются элементы, почему?

Ответы (0 шт):