I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page.
https://i.sstatic.net/aSsrC.png
Could you assist me in achieving this? Thank you!
HTML:
<header>
<div class="container">
<div class="header-text">
<h3>My aligned heading</h3>
</div>
</div>
</header>
SCSS:
header {
width: 100%;
margin-top: 80px;
height: 518px;
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
.container {
.header-text {
position: absolute;
right: 0;
bottom: 30px;
h3 {
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
padding: 10px 10px 10px 45px;
border: 0;
border-radius: 0;
background-color: #fff;
text-align: start;
}
}
}
}