Reputation: 269

Html CSS margin?

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;
    }

Upvotes: 0