Text and images won't center on my page

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>
          <a href="#add-fastrack"><img class="img-resize img-center img-zero image-border img-responsive" src="http://ift.tt/2yUQfKp" alt="Ami laughing at her 26th Birthday"> </a>
  </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;}