What could be causing my "Section" to not align properly in the center?
I believed that this CSS should have resolved it:
section{
width: 80%;
margin-left: auto;
margin-right: auto;
}
However, it seems like something went wrong. Can you identify the issue?
Here is the HTML code snippet:
<!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>
<article id="intro" class="scrollBlock">
<h1>HOMES on the WEB</h1>
<p>WHats going on, somekinda test text
Likely to go and whats going to happen, hoihfedfh
Fancy scrolling is going to Happen !!!</p>
</article>
<article id="slide2" class="scrollBlock">
<h2>SLIDE 2</h2>
<a href="http://google.com" id="photoSlide2"><img src="images/block2.png" alt="" /></a>
<p>Text TUTYUYIUYOIUOIUiihjihiohiuhiuhuhuhuohoiuhoiyuoiuy</p>
<p class="btn"><a href="http://google.com">Vist HERE!!!</a></p>
</article>
<article id="dog" class="scrollBlock">
<h2>My dog has his own website</h2>
<p>That's right! My dog Dog has his very own website full of cute doggy photos right from being a pup.<br/>
<strong>Check out Jake's website at <a href="http://google.com">http://google.com</a></strong></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>
And here is the related CSS styling:
body{
font: 18px/30px Sans-serif;
color: black;
background:url('../images/bodyBG.png');
}
section{
width: 80%;
margin-left: auto;
margin-right: auto;
}
.scrollBlock{
width: 70%;
}
#intro{
background: lightgreen url(../images/dragon.jpg) left no-repeat;
/*background-size: cover;*/
}
#intro h1{
width: 677px; height: 122px;
background: url(../images/btn_intro.png);
text-indent: -9999px;
position: relative;
top: 145px;
left: 0;
}
#intro p{
position: relative;
top: 200px;
left: 350px;
width: 508px;
margin: 0 0 30px 0;
}
#intro p:nth-child(2){
font-weight: bold;
}
#slide2{
background: lightpink url(../images/texture_purple.png);
}
#dog{
background: black url(../images/dog.jpg)no-repeat;
background-size: cover;
padding-top: 400px;
}
#dog h2{
opacity: 0;
}