P5.js Canvas using Bootstrap

p5.js Libraries
1

I’m trying to use Bootstrap to make my website with my p5.js code and I’m having a hard time with figuring out aligning my elements so the video canvas on top of the button on the left hand side. Any ideas why it’s not properly aligning? With the code I have, there’s some weird white padding on top, then the button, then the video canvas.

<!DOCTYPE html><html>

  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>MUS4199 Project</title>  

    <script src="ml5.min.js" type="text/javascript"></script>
    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-5.0.0-beta2-dist/css/bootstrap-min.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>

    <div class="container">
      <div class="row align-items-start">
        <div class="col">
            <video autoplay="true"></video>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col">
          <button id="dholButton">Start Dhol</button>
        </div>
      </div>
    </div>

    <script src="sketch.js"></script> 
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
  </body>

</html>