0

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>
clod9353
  • 1,942
  • 2
  • 5
  • 20
ChDrY322
  • 27
  • 6

1 Answers1

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I want to get to know flex-box and other semi-advance and advance stuff but i feel like i should cover some basics first . What do you think about this approach? i just started web . – ChDrY322 Jan 24 '21 at 15:22
  • Using floats for this kind of layout is an ugly hack with lots of unwanted side effects such as the one you are experiencing. Flexbox isn't "advanced", it is just newer. – Quentin Jan 24 '21 at 15:24
  • Ok, i will start using flex-box from now on, Appreciate the answers!! – ChDrY322 Jan 24 '21 at 15:31