Struggling to center my text in the middle of the page. Tried using margin-left and right set to auto but it's currently off to the left. As a newbie in front end development, I'm facing some challenges.
Check out the jsFiddle link: http://jsfiddle.net/o7rq7t0k/1/
HTML:
<header>
<div class="background_image">
</div>
<div class="welcome-text-container">
<div class="row">
<h1 class="welcome-text1">Welcome!</h1>
</div>
</div>
</header>
CSS:
.background_image {
background-image: image-url("header-bg.jpg");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%;
position: absolute;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
.welcome-text-container {
z-index: 100;
position: absolute;
padding-top: 300px;
padding-bottom: 200px;
/*display: block;*/
margin-left: auto;
margin-right: auto;
}
.row {
padding-left: 50px;
padding-right: 50px;
}