CSS not rendering correctly when first loaded


I have a Function Component that returns the Logo. This Logo when first loaded, it appears in the left side of the screen. And if I resize or do almost anything, it “centers itself” to where it was supposed to be in the first place.

I realized that the div that contains class “title” has no style at first, and then it appears with a margin.

If I extract the function components code, and insert it directly into each page, it renders then correctly all the time.

Why is it that it is not detecting all css when it is first loaded?

I appreciate any help.

This how CSS works in browser, if your logo is <img> then specify its width and height with attributes or in CSS styles

The css was correct. Had to add ‘slot’ as a prop.