I managed to disconnect my body, trying to position my slider in the background, so that it is also centered and so that it remains centered even when the window is resized.
A site is accessible, if your browser allows you to zoom out, you can see that the site is centered, but when you open it and the image of the slider is too large, it just aligns with the left edge of the window.
I'm self-taught, so maybe I missed something or just need guidance on how to fix it. please, help!
css is here:
#billboardWrapper {height:600px;width:1800px; margin:-170px auto auto; position:relative; overflow:hidden; }
#billboard {height:600px;width:1800px;position:relative; background-position: 50% 0pt;}
#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }
.slide {height:600px;width:1800px;display:none; }
.slide img {height:600px; width:100%; background-position: 50% 0pt;
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:auto;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:auto;}
html (copied from firebug as html loads liquid)
<html>
<head>
<body id="welcome" class="index" data-twttr-rendered="true">
<div id="body">
<div id="utility-wrap">
<div id="header-wrap">
<div id="content-wrap">
<script type="text/javascript" src="//dk0684j3ynpoi.cloudfront.net/assets/client.js">
<div id="gatekeeper-content" class="">
<div id="body">
<div id="billboardWrapper">
<span id="billboardPrev">Previous</span>
<span id="billboardNext">Next</span>
<div id="billboard">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0; display: none; width: 1800px; height: 600px;">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 1800px; height: 600px;">
<img alt="" src="http://static.shopify.com/s/files/1/0059/9612/t/10/assets/slideTwo.jpg?108526">
</div>
</div>
</div>
</div>
! [this is how it looks like enlarged] [2]! [with a narrow resolution, the slider aligns with the left side of the window and shifts] [3]! [is this what i was striving for?! ??] [4]