Presenting my React component:
<div className='sidebar'>
<div className="sidebarItem">
<span className="sidebarTitle">About Me</span>
<img src="https://wallpaperaccess.com/full/1129022.jpg" alt="" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam sit
accusantium perferendis earum. Numquam libero vero, fuga, omnis.</p>
</div>
<div className="sidebarItem">
<span className="sidebarTitle">Categories</span>
<ul className="sidebarList">
<li className="sidebarListItem">Life</li>
<li className="sidebarListItem">Music</li>
<li className="sidebarListItem">Movies</li>
<li className="sidebarListItem">Tech</li>
</ul>
</div>
<div className="sidebarItem">
<span className="sidebarTitle">Follow Us</span>
<div className="sidebarSocial">
<i className="sidebarIcon fa-brands fa-facebook-f"></i>
<i className="sidebarIcon fa-brands fa-instagram"></i>
<i className="sidebarIcon fa-brands fa-twitter"></i>
</div>
</div>
</div>
Including my CSS styling:
.sidebar{
flex: 3;
margin: 20px;
padding-bottom: 30px;
background-color: hwb(0 96% 1%);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sidebarTitle{
align-self: center;
margin: 10px;
padding: 5px;
width: 80%;
border-top: 1px solid #a7a4a4;
border-bottom: 1px solid #a7a4a4;
font-family: 'Rubik', sans-serif;
font-size: 12px;
color: #222;
font-weight: 600;
line-height: 20px;
text-align: center;
display: flex;
}
.sidebar img{
margin-top: 15px;
width: 300px;
height: 400px;
}
However, the 'align-items: center' property in the sidebar class is not working for the first sidebar item. Here's how it looks:
https://i.sstatic.net/cruzn.png
I want all the divs to be centered, but the first one remains off-center. Any insights on what I might be missing here?