HTML isn't centered properly

Question

https://fast-fortress-5770.herokuapp.com/

just need some hand holding to get the h1 element Yo! Justin here. and the h3 element I'm all over this web thing to be responsive, but also centered, too. however, struggling with this, so I'd be grateful if one could lend hand. Many thanks.

  .section { text-align: center; margin:0!important; padding:0!important; } #floater { margin-top: 23% 0; margin-left: 39% 0; } 

  <div class="section" id="floater"> <h1><strong>Yo! Justin here.</strong></h1> <h3>I'm all over this web thing.</h3> </div> 

Answer 1

#floater
{
  width: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

add this piece of css in place of the code you have for #floter. this should work for most of the browsers.

Answer 2

You can either assign text-align: center to your h1 and h3 or you can add

.section {
margin: 0 auto;
}

A div is not text so it cannot use text-align.

Answer 3

When you have code that is this small a fast way to debug it would be to remove css line by line (you can comment out a line really quick if you don't want to delete it).

.section {  text-align: center;  
margin:0!important; 
padding:0!important; }
#floater {  margin-top: 23% 0;  
margin-left: 39% 0; }

for instance:

.section {  text-align: center;  
/*  margin:0!important; */
padding:0!important; }
#floater {  margin-top: 23% 0;  
margin-left: 39% 0; }