I have a little problem here with the left margin:
http://crystalise.tw/stuff/parallaxScroll/
As you can see, I cant figure out were the tiny margin origins from, I have figured I could get rid of it by assigning a negative margin-left value to the HTML tag in CSS but it wouldnt be the best solution. Could you help me out to a better way ??
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LifeSymb.com</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<section id="intro" class="scrollBlock">
<h2 class="arrow_box">scroll down to learn<br />
more about us!</h2>
</section>
<section>
<article id="slide1" class="scrollBlock">
<h1>SLIDE 1</h1>
<h2>The Need</h2>
<p>60% of all runners experience chronic or acute<br />
injuries related to running</p>
<img src="images/runInjury.jpg" alt="" width="540" height="360" />
<p>and a previous injury is number one predictor for a<br />
subsequent injury.</p>
<p>Prevention is worth a consideration, if you are<br />
planning to maintain an active lifestyle.</p>
</article>
<article id="slide2" class="scrollBlock">
<h2>BUT WHAT CAN YOU DO?</h2>
<p>Relevant knowledge is hidden in millions of pages<br />
of literature...</p>
<img src="images/books.jpg" alt="" width="436" height="275" />
<p>...but do you really want to read all these books?<br />
How do you know what information is important for<br />
your individual case?</p>
</article>
<article id="slide3" class="scrollBlock">
<h2>SLIDE 3</h2>
<p>First you need to know more about your body, then<br />
you can apply knowledge from external sources to it.</p>
<p>Hence, evidence based decision-making is the<br />
optimal way to a high standard health and fitness<br />
solution.</p>
<p>But, how can you get insight on your body on a<br />
regular basis for a small price?</p>
</article>
<article id="slide4" class="scrollBlock">
<h2>THE ANSWER IS....</h2>
<p>Georg</p>
<p>an intelligent self-screening system</p>
<p>Georg is a cost-efficient and unique way to improve<br />
health and fitness to an optimal level, while<br />
considering individual constraints and potentials.</p>
</article>
<article id="slide5" class="scrollBlock">
<h2>SLIDE 5</h2>
<p>It is an intelligent self-screening and analyzing<br/>
system, creating an individual health and fitness<br />
profile.</p>
<p>The profile is accessible via computer or smart-<br />
phone. It shows your personal strengths and risks<br />
using a virtual avatar.</p>
<p>In that way, Georg will guide you in all your<br />
decisions regarding health and fitness, helping you<br />
staying healthy and pushing your performance to a<br />
new, more sustainable level.</p>
</article>
<article id="slide6" class="scrollBlock">
<h2>ENJOY...</h2>
<p>..increased autonomy and control of your health<br />
and physical independence, and decreased fear<br />
and risk of injury.</p>
<h2>HAVE ACCESS...</h2>
<p>..to your status instantly at any time and predict the<br />
success of your training, considering your individual<br />
profile. You are responsible for your success.</p>
</article>
<article id="slide7" class="scrollBlock">
<h2>SHARE...</h2>
<p>..your success on social media platforms such as<br />
facebook and twitter.</p>
<h2>CONTROL...</h2>
<p>..your personal development and achieve your<br />
fitness and health goals with the help of your<br />
private health and fitness mentor.</p>
</article>
<article id="outro" class="scrollBlock">
<h2>OUTRO</h2>
<img src="images/logo.png" alt="" width="164" width="59">
<p>prescribe now for our free newsletter, and be<br />
one of the first!</p>
<p>subscribe here</p>
</article>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/libs/jquery.scrollorama.js"></script>
<script src="scripts/scrollScript.js"></script>
</body>
</html>
CSS:
body{
margin-top: 0px;
width: 100%;
font: 18px/30px Sans-serif;
color: black;
background:url('../images/bodyBG.png');
overflow-x: hidden;
}
section{
width: 80%;
margin: 0px auto;
}
h2{
margin: 0px;
}
section article {
/*margin: 0px auto;*/
}
.scrollBlock{
width: 80%;
opacity: 1;
padding-bottom: 500px;
}
#intro{
height: 1000px;
background: yellow;
padding-top: 600px;
width: 100%;
margin-left: 0px;
}
#intro h2{
width: 400px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
padding: 60px;
font-size: 40px;
font-family: verdana, monospace;
margin-left: auto;
margin-right: auto;
}
#slide1{
background: lightgreen;
/*background-size: cover;*/
}
#slide1 h1{
margin: 0px;
width: 677px; height: 122px;
background: url(../images/btn_intro.png);
text-indent: -9999px;
position: relative;
top: 0px;
left: 0px;
}
#slide1 p{
position: relative;
top: 0px;
left: 0px;
width: auto;
/*margin: 0 0 30px 0;*/
}
#slide1 p:nth-child(2){
font-weight: bold;
}
margin:0; padding:0;on thehtmlandbody