h1 wont center and doesn't respect its container

Question

I've been trying to center h1 but it just isn't working ,i've made sure that it isn't inside a smaller div ,i've even tried to text-align:center on the parent div but it still isn't working,also if i keep adding words in h1 it escapes the div and the text leaks to outside of the div.

i would like to know how to fix it without using flexbox, if thats all right.

*{
    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

You have floating content before it, so it wraps around the floating content.

The quick and dirty solution is to set the clear property to stop that.

The better solution is to stop using float as a hack to move things to the left and right of a container and replace it with flexbox.