CSS: Why are both texts not starting on same level

Issue

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

I'm trying to do it this way, however I'm getting the output above.

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 someone discover where do I have an error?

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
}

Answered By - Ogrodev