I've experimented with various classes like ml-auto, float: left, float-left, and fixed-left, but none have successfully aligned my image to the left as desired. I'm hesitant to use margin adjustments as they are not always responsive across different screen sizes and can create unwanted white space. I've scoured similar inquiries from other users, but those solutions often turned out to be simple typos. After reviewing my own code, I haven't been able to spot any errors.
If you could provide an explanation or point me towards a resource that clarifies which method is best for positioning my image to the left and how to adapt it to different scenarios, I would greatly appreciate it. Here is a link to my JSfiddle, containing all the relevant HTML and CSS.
https://jsfiddle.net/1kdtjmh8/
Below is the snippet of code pertaining to the problematic image:
<div class="container">
<div class="row">
<div class="col-lg img-col">
<img class="img-fluid home-image ml-auto" src="HomeImage.jpg" alt="">
</div>
And here is the corresponding CSS:
.home-image{
height: 100vh!important;
width: auto!important;
display: block;
float:left;
}