This is 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>

```

The following is my CSS:

```
    .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;
}

```

but the align items:center in the sidebar class does not work for the first sidebar item. The following is the result:

[![Astronaut image](https://i.stack.imgur.com/cruzn.png)](https://i.stack.imgur.com/cruzn.png)

I want all the divs to be centered but the first one is not being centered. What am I doing wrong here ?