0

Коллеги, добрый день, первый раз сталкиваюсь с такой проблемой, прошерстил всю первую страницу гугла, но решения так и не нашёл. Не работает margin: 0 auto.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style-type: none;
}

.container {
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
}

.header {
    background-color: black;
}

.logo {
    margin: 0 auto;
}
<div class="wrapper">

    <header class="header">
        <div class="container">
            <img class="logo" src="img/logo.svg" alt="logo">
        </div>
    </header>

    <main class="main"></main>

    <footer class="footer"></footer>

</div>

5
  • 1
    Вот, моя правка, что-нибудь понятно в форматировании кода? 12 мая в 18:46
  • 1
    Кстати, когда задаёте вопрос, есть там справка по форматированию кода в какой-то из жёлтых секций 12 мая в 18:46
  • 1
    Проблема, возможно, из-за того, что img - inline-элемент (инлайн-элемент). Короче, завтра опишу подробнее. 12 мая в 18:51
  • 1
    И вправду, прописал display: block - всё заработало. А почему именно это лого inline, а с другими картинками у меня таких проблем не было? 12 мая в 18:59
  • 1
    И правку глянул Вашу, понял, спасибо 12 мая в 19:01

1 ответ 1

1

добавьте display: inline, должно исправить проблему

.container {
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    display: inline
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.