CSS: Why are both texts not starting on same level

I’m trying to start this lines of text on the same left level, but I’m having problems doing it.

CSS code:

.sideBar-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    bottom: 10px;
}

.sideBar-footer-image {
    width: 50px;
    height: 50px;
    background-color: #D9D9D9;
    border-radius: 10px;
}

.sideBar-footer-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sideBar-footer-text h1 {
    font-size: 15px;
    font-weight: 500;
    line-height: 15px;
    color: #FFFFFF;
}

.sideBar-footer-text p {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;
}

Can you please help me solve this?

>Solution :

You need to debug why is it showing the space before. To do that, right-click on the <p> tag in the browser and inspect the element. Then you want to go to the ‘Layout’ in the styles section of the inspector and check if the element has any spacing.

You’ll probably see something like this

You can see I have a 10px padding (violet area)

After Understanding what is causing your element to be more to the right, probably margin/padding you can search for the rule where I put "You can search here" on the image

This way you will understand why you are seeing this space and where is it coming from.

To override you can just add a rule to your ".sideBar-footer-text p" set of rules something like
padding: 0 or margin: 0
depending on what is causing the space.

Also, you can see your h1 has a big margin below it, you should probably add a CSS reset on your project. You can do so by adding the snippet below at the topmost CSS import right at the beginning of the file.

* {
 padding:0;
 margin:0;
 vertical-align:baseline;
 list-style:none;
 border:0
}