h1 不会居中并且不尊重它的容器

Question

我一直在尝试将 h1 居中，但它不起作用，我确保它不在较小的 div 内，我什至尝试 text-align:center 在父级 div 上，但它仍然无法正常工作，而且如果我继续在 h1 中添加单词，它会转义 div 并且文本会泄漏到 div 之外.

我想知道如何在不使用 flexbox 的情况下修复它，如果可以的话。

*{
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

header{

    min-height: 70px;
    border-bottom: 3px solid black;
    background-color: gray;
}

#brand{

    float: left;
    margin-top: 12px;
}


.container{

    width: 80%;
    margin: 0 auto;

}
header nav{

    float: right;
    padding: 20px  ;

}

header nav ul li{

    padding-left: 20px;
    display: inline-block;

}

header nav ul li a{

    text-decoration: none;
    color: royalblue;
    font-size: 25px;
}


#main h1 {

    text-align: center;
}

    <header>
       <div class="container">
       <div id="brand">
               <h1>Acme </h1>
            </div>

            <nav>

                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contacta</a></li>
                 </ul>
            </nav>
      </div>
  </header>

  <section id="main">

    <div class="container">
         <h1>Lorem, ipsum dolor.</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quae nisi aliquid, saepe eaque ad
        repudiandae hic minus commodi tempore.</p>
    </div>


  </section>

Answer 1

你前面有浮动内容，所以它环绕浮动内容。

快速而肮脏的解决方案是设置 clear 属性来阻止它。

更好的解决方案是停止使用浮动作为将内容移动到容器左侧和右侧的技巧，并将其替换为 flexbox。

h1 不会居中并且不尊重它的容器

h1 wont center and doesn't respect its container

html

css

text

position

text-alignment