Не работает margin 0 auto для центрирования контейнера

Question

Всем привет! начал изучать верстку, пытаюсь слепить сайт и надо центрировать содержимое container но margin 0 auto не срабатывает, буду рад если мне кто-нибудь подскажет и поможет! заранее спасибо!

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css2/style.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Сайт ForBelka</title>
</head>
<body>
  <header class="header">
    <div class="container">
      <a class="logo" href="">
        <img src="img/logo.svg" alt="Logo">
      </a>
      <a class="burger">
        <img src="img/Component2.svg" alt="Burger">
      </a>
      <a class="icon">
        <img src="img/instagram1.svg " alt="instagram">
      </a>
    </div>
  </header>

  <main class="main">
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <span class="hero-subtitle">Онлайн курс</span>
          <h1 class="hero-title">ИНВЕСТИЦИИ НА ДИВАНЕ</h1>
          <p class= "hero-text">Уже после первого занятия вы почувствуете, что вы «в теме». Курс стартует <strong>24 мая!</strong></p>
          <button class="button">Записаться на курс</button>
        </div>
      </div>        
    </section>

    <div class="about">
      <div class="container">
        <h2 class="title2" id="titleone">ПРОГРАММА КУРСА</h2> 
        <h3 class="title3" id="subtitleone">Вводное занятие. Инвестиции и биржа.</h3>
        <span class="number" id="one">1</span>
        <span class="about" id="oneabout">Вы будете знать</span>
        <ul class="list">
          <li class="first">Какие бывают виды инвестиций?</li>
          <li class="first">Зачем нам инвестировать?</li>
          <li class="first">Куда деваются наши деньги на&nbsp;фондовом рынке?<br>Как это работает? Разбор основных понятий</li>
          <li class="first">Виды бирж и наши пути выхода на биржу</li>
        </ul>

        <h3 class="title3" id="subtitletwo">Выбор брокера. Брокерские счета.</h3>
        <span class="number" id="two">1</span>
        <span class="about" id="twoabout">Вы будете знать</span>
        <ul class="list">
          <li class="first">ТОП брокеров РФ. Условия открытия счета,<br>комисии, отличия</li>
          <li class="first">Резиденты и&nbsp;нерезиденты РФ&nbsp;&mdash;<br>кому и&nbsp;где можно открыть счет?</li>
          <li class="first">Обзор зарубежных брокеров <br> и&nbsp;когда они нам нужны. Условия открытия счета</li>
          <li class="first">Разбор отличий брокерских счетов в&nbsp;РФ <br>и&nbsp;заграницей, преимущества заграничного счета<br>и&nbsp;преимущества ИИС, виды вычетов</li>
        </ul>

        <h3 class="title3" id="subtitlethree">Акции.</h3>
        <span class="number" id="three">3</span>
        <span class="about" id="threeabout">Вы будете знать</span>
        <ul class="list">
          <li class="first">Как на этом зарабатывать?</li>
          <li class="first">Дивидендный гэп и как его выгодно использовать?</li>
          <li class="first">Освоение мультипликаторов</li>
          <li class="first">Классификация акций по&nbsp;их&nbsp;надежности<br>и&nbsp;доходности</li>
        </ul>
      </div>
    </div>

    <div class="form">
      <div class="container">
        <h4 class="titlefour">ЗАПОЛНИ ФОРМУ И ВЫБЕРИ ТАРИФ</h4>
        <div class="backgroundcolor"></div>
        <form action="" class="">
          <input type="text" class="form" placeholder="Введите имя">
          <input type="text" class="form" placeholder="Ваш e-mail">
          <button class="formbutton">Перейти к выбору тарифа</button>
        </form>
     </div>
    </div>

    <div class="video">
      <div class="container">
        <h5 class="title5">ПОСМОТРИ ТРЕЙЛЕР ОБУЧЕНИЯ</h5>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/GhMwJsgHqAs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </main>

  <footer class="footer">
    <div class="container">
      <a class="logo" href="" alt="logo Kaskun">
        <img src="img/logo1.svg">
      </a>
      <a href="">
        <p class="footertext">Договор-оферта</p>
      </a>
      <a href="">
        <p class="footertext">Политика конфиденциальности</p>
      </a>
      <a download href="img/договор оферты.футер.docx"> 
        <p class="footertext">Политика сбора персональных данных</p>
      </a>
      <a class="icon" alt='Instagramlink'>
        <img src="img/instagram 1.svg">
      </a>
    </div>
  </footer>
</body>
</html>

Answer 1

Чтобы какой-либо элемент центрировался он должен быть блочный то есть

Display: block;

Также проверьте, правильно ли у вас указан класс в css

.container

И ещё, возможно вы забыли указать ширину контейнера

width: 1330px;

БЛОГ НА HUSL

Не работает margin 0 auto для центрирования контейнера

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