I am currently working on a facebook website clone and I am encountering an issue where I am working to make a flex-box with a stories and reels section but it seems both sections and their text are sticking together instead of being centered on the right and left side respectively:
Image of the result I want:
My current code where the stories and reels are stuck together:
html,
body {
height: 100vh;
padding: 0;
margin: 0;
background-color: #f1f2f5;
}
/* this part is for the header */
.header {
display: flex;
position: fixed;
align-items: center;
background-color: #fff;
justify-content: space-between;
flex-direction: row;
padding-bottom: 10px;
z-index: 1;
height: 45px;
padding: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
top: 0;
left: 0;
right: 0;
}
.leftHeader {
width: 25%;
display: flex;
justify-content: left;
align-items: left;
flex-direction: row;
}
.logo {
height: 50px;
width: 75px;
}
.searchBar {
background-color: #eff2f5;
position: relative;
padding: 15px;
border-radius: 40px;
display: flex;
gap: 20px;
margin-left: -10px;
height: 10px;
}
.searchBtn {
width: 20px;
height: 20px;
cursor: pointer;
}
.searchLogo {
height: 30px;
width: 50px;
}
.inputText {
background-color: #eff2f5;
outline: none;
border: 0;
width: 175px;
height: 15px;
}
.centerHeader {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
}
.centerHeader i {
font-size: 25px;
}
.rightHeader {
width: 25%;
display: flex;
justify-content: right;
align-items: right;
flex-direction: row;
gap: 20px;
}
.rightHeader i {
font-size: 25px;
}
.profilePic img {
height: 25px;
width: 25px;
border-radius: 50%;
object-fit: cover;
}
/* This part is for the main */
.mainBar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 50%;
margin: 50px auto 0;
}
.stories_Reels_Box {
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-start;
height: 300px;
width: 75%;
border-radius: 5px;
background-color: white;
margin-top: 30px;
margin-bottom: 20px;
}
.upper_Box {
display: flex;
justify-content: space-between;
align-items: center;
height: 30%;
width: 100%;
border-bottom: 2px solid black;
}
.stories {
flex: 1;
text-align: right;
text-decoration: underline;
text-decoration-color: blue;
}
.reels {
flex: 1;
text-align: left;
text-decoration: underline;
text-decoration-color: blue;
}
.whats_On_Your_Mind {
height: 300px;
width: 75%;
border-radius: 5px;
background-color: white;
margin-bottom: 20px;
}
.post_One {
height: 300px;
width: 75%;
border-radius: 5px;
background-color: white;
margin-bottom: 20px;
}
.people_You_May_Know {
height: 300px;
width: 75%;
border-radius: 5px;
background-color: white;
margin-bottom: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/a35cda4da8.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="header">
<div class="leftHeader">
<img class="logo" src="images/Facebook-logo.png" />
<div class="searchBar">
<img class="searchBtn" src="images/search-icon.webp" />
<input type="text" class="inputText" placeholder="Search Facebook" />
</div>
</div>
<div class="centerHeader">
<div class="home">
<i class="fa-solid fa-house" style="color: #000000"></i>
</div>
<div class="watch">
<i class="fa-sharp fa-solid fa-tv" style="color: #000000"></i>
</div>
<div class="marketplace">
<i class="fa-solid fa-shop" style="color: #000000"></i>
</div>
<div class="group">
<i class="fa-solid fa-user-group" style="color: #000000"></i>
</div>
</div>
<div class="rightHeader">
<div class="menu">
<i class="fa-solid fa-bars" style="color: #000000"></i>
</div>
<div class="message">
<i class="fa-brands fa-facebook-messenger" style="color: #000000"></i>
</div>
<div class="notification">
<i class="fa-solid fa-bell" style="color: #000000"></i>
</div>
<div class="profilePic">
<img
src="/images/ProgrammingIllustration.png"
alt="profile_picture"
/>
</div>
</div>
</div>
<div class="mainBar">
<div class="stories_Reels_Box">
<div class="upper_Box">
<div class="stories">Stories</div>
<div class="reels">Reels</div>
</div>
</div>
<div class="whats_On_Your_Mind"></div>
<div class="post_One"></div>
<div class="people_You_May_Know"></div>
</div>
<div class="leftSidebar"></div>
<div class="rightBar"></div>
</body>
</html>
2
Answers
I just put flex on the .upper_Box class
I also changed the classes (.stories and .reels) to have flex and center aligned the text
Because you are using
text-align:rightandtext-align:left,which makes to look like stick together.