how to ensure the video renders beside the chat data column not above it?

index.html

@@ -15,18 +15,17 @@
         <a href="/logout" class="btn btn-outline-light btn-sm">Logout</a>
     </div>
     <div class="row">
-        <!-- Webcam Column - Now full width -->
-        <div class="col-12 mb-4">
+        <!-- Left Column - Webcam -->
+        <div class="col-md-8 mb-4">
             <div class="text-center">
                 <h5>Live Webcam</h5>
-                <img src="{{ url_for('video_feed') }}" class="img-fluid rounded" style="max-height: 600px; width: auto;">
+                <img src="{{ url_for('video_feed') }}" class="img-fluid rounded" style="max-height: 600px; width: 100%;">
             </div>
         </div>
-    </div>
-    <div class="row">
+        
         <!-- Right Column - Highlights and Chat -->
         <div class="col-md-4 mb-4">
-            <div class="sticky-top" style="top: 20px;">
+<div class="sticky-top" style="top: 20px;">
                 <!-- Biome Display -->
                 <div class="mb-3 p-2 bg-info bg-opacity-25 rounded text-center">
                     <strong>Current Biome:</strong> <span id="current-biome">Loading...</span>
@@ -51,12 +50,7 @@
                 </div>
             </div>
         </div>
-
-        <!-- Main Content Column - Empty for now -->
-        <div class="col-md-8">
-            <!-- Left empty or can be used for other content -->
-        </div>
-    </div>
+</div>
 </div>
 
 <script>

style.css

@@ -1,8 +1,13 @@
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    padding: 2rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+.img-fluid.rounded {
+    max-height: 600px;
+    height: 100%;
+    object-fit: contain;
 }
-
 h1 {
 	font-size: 16px;
 	margin-top: 0;