使用parallax.js时，Div与左侧对齐

Question

我在我的网站上使用parallax.js，但我有一个问题，大多数div总是因为某种原因略微对齐左边， 这是该网站的链接，http://skuares.com/月亮是有问题的部分。任何想法为什么会发生这种情况？

这是我的css`

.scene img {
    display: block;
    width: 100%;
}

.wrapsection3 {
    display: block;
    max-width: 80%;
    position: relative;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.wrapsection3 img {
    height: auto;
    margin: 0 auto;
    overflow-x: hidden;
}
#rocks {
    width: 50%;
    display: block;
}
#engine {
    width: 40%;
    display: block;
}
#machine {
    width: 10%;
    display: block;
    margin-bottom: 2em;
    margin-left: 46%;
}
#logos {
    margin-top: 0.5em;
    margin-bottom: 0.9em;
    margin-left: 47%;
    width: 8%;
    display: block;
}
#overengine
{
    position: absolute;
    margin-left:43%;
    width: 15%;
    display: block;
    opacity: 0.6;
}
/*Section3*/

.container {
    position: relative;
    max-width: 70%;
    padding: 5%;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.scene {
    padding: 0;
    margin: 0;
}
.fill {
    position: absolute;
    bottom: 5%;
    right: 5%;
    left: 5%;
    top: 5%;
}
.expand-width {
    width: 100%;
}
.border {
    border: 2px dashed #00FFAA;
}
.aspect {
    opacity: 0.2;
}
.layer:nth-child(1) {
    opacity: 1;
}
.layer:nth-child(1) button {
    -webkit-transform: rotate(150deg);
}
.layer:nth-child(2) {
    opacity: 1;
}
.layer:nth-child(2) button {
    -webkit-transform: rotate(120deg);
}
.layer:nth-child(3) {
    opacity: 1;
}
.layer:nth-child(3) button {
    -webkit-transform: rotate(90deg);
}
.layer:nth-child(4) {
    opacity: 1;
}
.layer:nth-child(4) button {
    -webkit-transform: rotate(60deg);
}
.layer:nth-child(5) {
    opacity: 1;
}
.layer:nth-child(5) button {
    -webkit-transform: rotate(30deg);
}
.layer:nth-child(6) {
    opacity: 1;
}
.layer:nth-child(6) button {}
/*Start Stack*/

.moon {width: 90%;} .manonmoon {
    margin-top: 39%;
    margin-left: 28%;
    width: 9%;
    opacity: 1;
}
.rocktop {
    position: absolute;
    margin-top: -10%;
    margin-left: 38%;
    width: 19%;
    opacity: 1;
}
.rocktop-left {
    position: absolute;
    margin-top: 9%;
    margin-left: 24%;
    width: 7%;
    opacity: 1;
}
.rocktop-left-1 {
    position: absolute;
    margin-top: 13%;
    margin-left: 0%;
    width: 15%;
    opacity: 1;
}
.rocktop-left-1-small {
    position: absolute;
    margin-top: 16%;
    margin-left: 14%;
    width: 6%;
    opacity: 0.7;
}
.rocktop-right {
    position: absolute;
    margin-top: 8%;
    margin-left: 90%;
    width: 15%;
    opacity: 1;
}
.rocktop-right-1 {
    position: absolute;
    margin-top: 8%;
    margin-left: 65%;
    width: 5%;
    opacity: 0.9;
}
.rocktop-right-2 {
    position: absolute;
    margin-top: 12%;
    margin-left: 60%;
    width: 4%;
    opacity: 0.8;
}
.mid-left {
    position: absolute;
    margin-top: 30%;
    margin-left: -5%;
    width: 6%;
    opacity: 0.8;
}
.mid-left-far {
    position: absolute;
    margin-top: 36%;
    margin-left: -15%;
    width: 20%;
    opacity: 0.9;
}
.rock-under-moon {
    position: absolute;
    margin-top: 80%;
    margin-left: 30%;
    width: 55%;
    opacity: 1;
}
#bunnypng {
    position: absolute;
    margin-top: 8%;
    margin-left: 40%;
    width: 15%;
    opacity: 1;
}
#clock {
    position: absolute;
    margin-top: 20%;
    margin-left: 30%;
    width: 8%;
    opacity: 1;
}
#cupcakes {
    position: absolute;
    margin-top: 26%;
    margin-left: 21%;
    width: 10%;
    opacity: 1;
}
#drum {
    position: absolute;
    margin-top: 30%;
    margin-left: 40%;
    width: 15%;
    opacity: 1;
}
#manundermoon {
    position: absolute;
    margin-top: 70%;
    margin-left: 70%;
    width: 17%;
    opacity: 1;
}
#spacemantopleft {
    position: absolute;
    margin-top: 20%;
    margin-left: 10%;
    width: 15%;
    opacity: 1;
}
#eyesbottom {
    position: absolute;
    margin-top: 76%;
    width: 70%;
    opacity: 0.8;
}
#eyething {
    position: absolute;
    margin-top: 26%;
    margin-left: -1%;
    width: 10%;
    opacity: 1;
}
#shapesscetion2 {
    position: absolute;
    margin-top: 5%;
    width: 100%;
    opacity: 1;
}
/*End stack*/

这是我的HTML：

<div class="container" id="container">
            <ul class="scene" data-calibrate-x="false" data-calibrate-y="true" relativeInput="false" id="scene">
                <li class="layer moon" data-depth="1.00">
                    <img src="img/Section2/Level0/Moon.png">
                </li>

                <li class="layer manonmoon" data-depth="0.95">
                    <img src="img/Section2/Level0/Man-on-moon.png">
                </li>

                <li class="layer rocktop" data-depth="0.80">
                    <img src="img/Section2/Level1/Rock-top.png">
                </li>

                <li class="layer rocktop-left" data-depth="0.84">
                    <img src="img/Section2/Level1/Rock-top-left.png">
                </li>

                <li class="layer rocktop-left-1" data-depth="0.82">
                    <img src="img/Section2/Level1/Rock-top-left-1.png">
                </li>

                <li class="layer rocktop-left-1-small" data-depth="0.90">
                    <img src="img/Section2/Level1/Rock-top-left-1-small.png">
                </li>

                <li class="layer rocktop-right" data-depth="0.70">
                    <img src="img/Section2/Level1/Rock-top-right.png">
                </li>

                <li class="layer rocktop-right-1" data-depth="0.75">
                    <img src="img/Section2/Level1/rock-top-right-2.png">
                </li>

                <li class="layer rocktop-right-2" data-depth="0.70">
                    <img src="img/Section2/Level1/rock-top-right-2.png">
                </li>

                <li class="layer mid-left" data-depth="0.60">
                    <img src="img/Section2/Level2/mid-left.png">
                </li>

                <li class="layer mid-left-far" data-depth="0.60">
                    <img src="img/Section2/Level2/mid-left-far.png">
                </li>

                <li class="layer rock-under-moon" data-depth="0.60">
                    <img src="img/Section2/Level2/Rocks-under-moon.png">
                </li>

                <li class="layer" data-depth="0.50" id="bunnypng">
                    <img src="img/Section2/Level3/Bunny.png">
                </li>

                <li class="layer" data-depth="0.55" id="clock">
                    <img src="img/Section2/Level3/Clock.png">
                </li>

                <li class="layer" data-depth="0.51" id="cupcakes">
                    <img src="img/Section2/Level3/cupcakes.png">
                </li>

                <li class="layer" data-depth="0.51" id="drum">
                    <img src="img/Section2/Level3/Drum.png">
                </li>

                <li class="layer" data-depth="0.2" id="eyesbottom">
                    <img src="img/Section2/Level5/eyes-bottom.png">
                </li>

                <li class="layer" data-depth="0.40" id="manundermoon">
                    <img src="img/Section2/Level4/man-under-moon.png">
                </li>

                <li class="layer" data-depth="0.40" id="spacemantopleft">
                    <img src="img/Section2/Level4/spaceman-topleft.png">
                </li>

                <li class="layer" data-depth="0.9" id="eyething">
                    <img src="img/Section2/Level5/Eye-shaped-thing.png">
                </li>

                <li class="layer" data-depth="0.1" id="shapesscetion2">
                    <img src="img/Section2/Level6/Shapes.png">
                </li>
            </ul>
        </div>