Custom CSS affecting block layout

Hi guys,
I have added a CSS hover effect on my H2 tags which I am happy about. However, towards the bottom of my demo page, by the section "Best Sellers" I cannot manage to align the "Best Sellers" in the middle of the page, it keeps pushing to the left. I've tried placing it in a separate container etc but really stuck.

http://www.sophiafioridiamonds.com

Ive used this CSS

.animated {
  max-width:auto;
  display: initial;
   
}

.animated{
  text-decoration: none;
  font-weight: 400;
  color: #000000;
  background-repeat: no-repeat;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

.animated{
  font-size: 36px;
  background-image: linear-gradient(to top, #FEF7F9, #FDEDED);
  background-size: 120%;
  background-position: 0 33px;
}

h2:hover {
  background-position: 0 5px;
        }
}

Could you assist? Is there perhaps another way of doing it? Was my first attempt so kinda lost! Thank you!!!

Website: http://www.sophiafioridiamonds.com