Text and images won't center on my page - css

Question

I am making my first webpage and I have the elements I want- I can't seem to get them to center on the page. I have tried margin: auto, text-align: center, and lots of toher things. Nothing has worked.
I want the header, an image , and a button at the end of my page, to be a central spine down my page. Any suggestions would be appreciated.
Thanks
Here is my code:
HTML:
<div class="container">
<h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"></div>
<img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday">
</div>
</div>
CSS
body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff; }
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
align: center;
padding-left: 40px;
padding-right: 40px;
float: center;
max width: 100%;
text-align: center;
marrgin: 0 auto;
float: center;}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}
.img-responsive {
margin: 0 auto;}
.img-resize {
max-width: 400px;
max-height: auto;}

Answer 1

you need to add the container text-align
<div class="container" style="text-align: center;">
the div that wraps your element is the responsible to align the element.

Answer 2

Define a class and call it for example .text-center and put inside it text-align: center,
once you want to center a text just give this class to the container element (parent element).
Hope this solve your issue.
body {margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff; }
.text-center {
text-align: center;
}
h1 {
display: inline-block;
background-color: yellow;
font-size: 300%;
border: solid;
border-radius: 25px;
padding-left: 40px;
padding-right: 40px;
max width: 100%;}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;}
.img-resize {
max-width: 400px;
max-height: auto;}
<div class="container text-center">
<h1> My tribute to Ami Coxill Moore</h1>
</div>
<!-- picture of ami here -->
<div class="container text-center">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"></div>
<img class="img-resize img-center img-zero image-border img-responsive" src="https://i.imgur.com/Lc5nBon.jpg" alt="Ami laughing at her 26th Birthday">
</div>
</div>

Answer 3

There are some mistake in your code, for example, you must use of max-width: 100%; no max width: 100%; or text-align: center; no align: center; value for float is left or right so float:center is wrong, and other mistakes.
see my code:
body {
margin-top: 100px;
background-color: #ff69b4;
font-family: "gerogia", serif;
color: #0000ff;
}
h1 {
background-color: yellow;
font-size: 300%;
border: 1px solid;
border-radius: 25px;
text-align: center;
padding-left: 40px;
padding-right: 40px;
max-width: 100%;
text-align: center;
margin: 0 auto;
}
div {
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;
}
.row {
text-align: center;
}
.row img {
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h1 class="text-center"> My tribute to Ami Coxill Moore</h1>
</div>
<div class="container">
<div class="row">
<a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" alt="Ami laughing at her 26th Birthday">
</a>
</div>
</div>