CSS styling that rearranges containers added to club page

ProjectSourceCode/src/resources/css/club-pages/club-page.css

@@ -1,27 +1,6 @@
 #club-page-body {
     display: flex;
     flex-direction: column;
-    width: 100%;
-}
-
-#club-page-body {
-    padding: 50px;
-}
-
-#club-crest {
-    text-align: center;
-}
-
-#club-area-flag-row {
-    text-align: center;
-}
-
-#club-area-flag {
-    width : 150px;
-}
-
-#club-players-container {
-    padding: 30px;
 }
 
 #club-information-container {
@@ -40,6 +19,17 @@
     /* Add any other styling you need for the club information container */
 }
 
+#club-page-contents-container {
+    display: flex;
+    flex-direction: row;
+}
+
+#club-players-container {
+
+}
+
+
+
 #club-information-container::after {
     content: '';
     position: absolute;

ProjectSourceCode/src/views/pages/clubs-page.hbs

@@ -7,6 +7,8 @@
         <img id="league-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
     </div>
 
+    <div id="club-page-contents-container" class="information-container">
+
         <!-- Container on Left Side containing Club History -->
         <div id="club-history-container" class="information-container">
 
@@ -16,7 +18,6 @@
                 <h2>Information</h2>
 
                 <!-- Club Information -->
-            <ul id="scorers-list"></ul>
                 <table id="club-information-table" class="table">
                     <tbody>
 
@@ -58,7 +59,6 @@
 
                 <h2>Competitions</h2>
 
-            <ul id="competitions-list"></ul>
                 <table id="players-table" class="table">
                     <thead>
                         <tr>
@@ -86,7 +86,6 @@
 
                 <h2>Players</h2>
                 
-            <ul id="players-list"></ul>
                 <table id="players-table" class="table">
                     <thead>
                         <tr>
@@ -114,6 +113,8 @@
     
     </div>
 
+</div>
+