when I create a badge using the element my badge goes over the page (disappear half of it) when I increase the screen-size after 1024px. But the only media querie that I have before this rule is to change the font-size and by coincidence is 1.8rem.
padding: 1rem 3rem;
Use dev tools to investigate that. There is a computed style that has all you did not define yourself.
It is difficult without the project itself.
span are inline block by default. Now I had in mind any
position:relative but that is just a guess.
I checked and there is no padding or margin so I don’t really get why it is going above the height of the page.
The larger the padding the larger the area goes above the height of the page.
When I set the badge to display: inline-block then it gets corrected.