Image not aligning properly on webpage - html

Question

The image on my webpage is not properly aligned with the video for some reason. It looks like this: This is the image on my webpage
When I try to shift the picture up, it still does not align properly and jsut shifts everything up. How can I properly align the image and the video.
Here is my code so far:
<div class="col-md-9">
<div id="page-1" class= "page one">
<h2 class="heading">Projects</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">Feb 2020</span>
<h2>CLARITY - NSBE Hacks UofT</h2>
<span class="position"> First place winner and winner of best Google hack</span>
<p> Clarity is a web app catered towards children that struggle with autism. Children with autism have trouble recognising the emotions of other people. Our application listens peoples speech and analyzes the emotions being conveyed in said speech. After the analysis, recommendations are given to the user on how to navigate the situation, in an attempt to make navigating social situations easier. </p>
<img src="/static/images/clarity.png" height = 200px width = 250px>
<video width="300" height="300" controls>
<source src= "/static/video.mp4" type ="video/mp4">
</div>
</div>

Answer 1

Try encapsulating the image and video within their own Bootstrap div. Something like this:
<div class="md-col-6">
<img src="/static/images/clarity.png" height = 200px width = 250px>
</div>
<div class="md-col-6">
<video width="300" height="300" controls>
</div>
This will force the image and video to remain in two columns, and most likely line up with each other. I'd also recommend inspecting the element to see if any padding or margins are causing the misalignment.