fix: Extra space between parentDiv and childDiv

package.json

@@ -146,4 +146,4 @@
     ],
     "**/*.{ts, tsx, json}": "eslint --fix"
   }
-}
+}

src/components/ProfileDropdown/ProfileDropdown.module.css

@@ -2,13 +2,18 @@
   border: none;
   padding: 2.1rem 0.5rem;
   height: 52px;
+  width: 240px;
   border-radius: 8px 0px 0px 8px;
   display: flex;
+  position: absolute;
   align-items: center;
+  top: 50px;
+  right: 70px;
   background-color: white !important;
   box-shadow:
     0 4px 4px 0 rgba(177, 177, 177, 0.2),
     0 6px 44px 0 rgba(246, 246, 246, 0.19);
+  z-index: 1000;
 }
 .profileContainer:focus {
   outline: none;
@@ -60,10 +65,15 @@
   background-color: transparent !important;
 }
 .dropdownToggle {
+  height: 67px;
+  position: absolute;
+  top: 50px;
+  right: 40px;
   background-image: url(/public/images/svg/angleDown.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-color: azure;
+  z-index: 1000;
 }
 
 .dropdownToggle::after {

src/screens/UserPortal/Events/Events.module.css

@@ -14,14 +14,9 @@
   max-width: 800px;
 }
 
-.colorLight {
-  background-color: #f1f3f6;
-}
-
 .mainContainer {
   width: 50%;
   flex-grow: 3;
-  padding: 20px;
   max-height: 100%;
   overflow: auto;
 }

src/screens/UserPortal/Events/Events.tsx

@@ -159,7 +159,9 @@ export default function events(): JSX.Element {
     <>
       <div className={`d-flex flex-row ${styles.containerHeight}`}>
         <div className={`${styles.colorLight} ${styles.mainContainer}`}>
-          <h1>Events</h1>
+          <div className="mb-3">
+            <h1>Events</h1>
+          </div>
           <EventHeader
             viewType={viewType}
             showInviteModal={showInviteModal}

src/screens/UserPortal/People/People.module.css

@@ -47,14 +47,9 @@
   max-width: 600px;
 }
 
-.colorLight {
-  background-color: #f5f5f5;
-}
-
 .mainContainer {
   width: 50%;
   flex-grow: 3;
-  padding: 40px;
   max-height: 100%;
   overflow: auto;
 }

src/screens/UserPortal/Posts/Posts.module.css

@@ -13,7 +13,8 @@
 .mainContainer {
   width: 50%;
   flex-grow: 3;
-  padding: 1rem;
+  /* padding: 1rem; */
+  position: relative;
   max-height: 100%;
   overflow-y: auto;
   overflow-x: hidden;

src/screens/UserPortal/UserScreen/UserScreen.module.css

@@ -1,8 +1,9 @@
 .pageContainer {
   display: flex;
   flex-direction: column;
+  position: relative;
   min-height: 100vh;
-  padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
+  padding: 0rem 1.5rem 0rem calc(300px + 2rem + 1.5rem);
 }
 
 .expand {