How to align the logo to the center?

Question

css

There is a logo which consists of h1 for the logo text and before for the icon next to the text.
This logo needs to be center aligned.
If you paste this code

left: 50%;
transform: translateX(-50%);

Then the browser sees only h1, i.e. centers it on the screen.
I tried to pick up left: 47%, it looks good on the big screen, but if you reduce the size of the browser, then the logo is no longer centered. What is the most rational way to resolve the situation? Strictly do not judge, tk. I can say this is my first layout :)

Answer 1

Make the logo padding-left: {размер псевдоэлемента + отступ}have , and :before left: 0 instead of negative. Thanks to the padding, the pseudo-element will be included in the size of the logo and transform: translateX(-50%) will give the desired value.

Answer 2

Is it all in a div?
If not, then wrap it in a div and put

.etot-div {
margin: 0 auto;
}

well, or the whole footer

.footer {
display: flex;
justify-content: center;
}