Difficulty positioning centered div (again) - html

Question

http://samnorris.co.nz/backup/test/
In the section with the Pythagoras quote "There is geometry in the humming of the strings,
there is music in the spacing of the spheres" is a little experiment from Codepen I've tweaked a bit and have been playing around with (the rotating animated circles)
...not sure if my mind is just working a bit slow tonight or what but I'm having a great amount of difficulty positioning and centering the div that contains these elements underneath the div's that contain the quote and without overlaying the background...
any help would be appreciated :)
edit: updated code, I figured out why it was being pushed down (padding on the wrapper was causing it, so I've changed the background div to fixed height instead) now I just need to figure out why I am having to use left: 32% (roughly) to try and center it. Margin: 0 auto is failing me, and setting #spheres-block to width 100% messes up the bg.
Relevant CSS:
.spacesuit-bg {
background: transparent url("../img/spacesuit-bg.jpg") no-repeat 0 0;
color: #fff;
padding: 15% 0;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(0,0,0);
}
.quote-wrapper {
width: 100%;
display: block;
padding-top: 300px;
}
.quote-one {
font: 18px/1em "proxima_nova_rgbold", sans-serif;
font-weight: 700;
text-shadow: 0px 3px 3px rgba(0,0,0,0.3);
letter-spacing: 1px;
word-spacing: .06em;
width: 100%;
line-height: 1.25em;
}
.quote-two {
font: 36px/1em "proxima_nova_rgbold", sans-serif;
font-weight: 700;
text-shadow: 0px 3px 3px rgba(0,0,0,0.3);
letter-spacing: 1px;
word-spacing: .06em;
width: 90%;
line-height: 1.25em;
padding-top: 25px;
margin: 0 auto;
}
.spacesuit-wrapper:before, .missiongo, .golaunch {
display: inline-block;
vertical-align: middle;
}
#spheres-block {
overflow: hidden;
position: absolute;
display: block;
width: 600px;
height: 600px;
left: 32%;
}
.spheres {
width: 600px;
height: 600px;
margin: 0 auto;
position:absolute;
}
.rings {
border-radius: 50%;
border: 2px solid rgba(255,255,255, .5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0.6
}
Relevant HTML:
<div id="spacesuit-bg" class="section spacesuit-bg">
<div id="spheres-block">
<div class="spheres">
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
</div>
</div>
<div class="quote-wrapper">
<div class="quote-one wow flipInX">"There is geometry in the humming of the strings,</div>
<div class="quote-two wow flipInX">there is music in the spacing of the spheres."</div>
</div>
</div>

Answer 1

I am not a CSS expert (trying to learn, that's why I spend time here :)), so I may have missed other issues with my suggestion, but anyway I was able to achieve the desired effect by positioning the speres-block relatively, and positioning the quote-wrapper absolutely with a top offset of 0:
#spheres-block {
position: relative;
width: 650px;
height: 650px;
margin: 0 auto;
margin-top: 15px;
}
.quote-wrapper {
width: 100%;
display: block;
padding-top: 300px;
position: absolute;
top: 0px;
}
I hope I understood correctly.