I have been tasked by my mentor to create a website based on a wireframe that he sent me. However, I am facing difficulty in positioning the text on these "hero" images.
https://i.sstatic.net/Xw19o.jpg https://i.sstatic.net/uBdaa.jpg
The text seems to be stuck on the right half of the container, which is strange because offsetting them should have moved them over to the left. Unless, of course, I made a mistake.
I haven't made many changes and I am confused, especially since I used an offset in the same document that worked correctly. I tried using classes like justify-content-left, but they seemed to hit an invisible barrier in the middle of the container.
<div class="p-2" id="navigationFilter">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-6">
<header class="pt-5">
<p>Enjoy peace of mind knowing that you can</p>
<h1>Quickly send for help and alert loved ones</h1>
<button class="btn btn-lg btn-primary" type="button">Get Started</button>
</header>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</div><!-- translucent-->