Update static/style.css

static/style.css

@@ -112,25 +112,34 @@ body{
   margin-left: 25px;
 }
 
-
-#rightside{
-   
-    margin-left:430px ;
-    margin-right: 20px;
+#rightside {
+    margin-left: 430px;
+    margin-right: 5px;
     position: absolute;
 }
-#backgroundimg{
-    display: block;
+
+#imgContainer {
+    display: inline-block; /* Makes each imgContainer inline and block level */
+    margin-bottom: 20px; /* Adds spacing below each container */
+    flex-basis: calc(100% - 40px); /* Ensures each container has a minimum width */
+    flex-shrink: 0; /* Prevents the container from shrinking */
+}
+
+#backgroundimg {
     margin-top: 10px;
+    display: flex; /* Use flexbox to align items horizontally */
+    /* flex-wrap: wrap; Allows items to wrap to the next line if they exceed container width */
     background-color: lightgrey;
-    width:49%;
-    height: 407px;
-    position: absolute;
- }
+    /* width: 49%; */
+    overflow: auto;
+    white-space: nowrap;
+    padding: 20px;
+}
 
- #underimgbuttons{
+#underimgbuttons, #imgs {
     position: relative;
- }
+    flex-shrink: 0; /* Prevents these containers from shrinking */
+}
  ul {
     list-style-type: none;
     margin: 0;