Silly CSS question that i couldn't find a solution for it, how to adjust text inside a border so the text just fit it exactly without creating extra space in left and right, check the image

Just don't give the containing element a fixed width, then it will be just as wide as it's content

If you want the text to stretch out to fill the element you could try text-align:justify but in any case beware that it doesn't wrap on smaller screen sizes or it will break horribly

@12bitfloat thanks

I tried the following
width: auto didn't work
width:100% didn't work
width:50% worked somehow but not with few letters

Give the element `display: inline;` or `display: inline-block;` (or just use <span> for example) , remove padding-left and padding-right (if you added it), use flex on the parent element to center it if that's what you want

@Akhetopnu Excellent

@dIREsTRAITS Ah yeah forgot to mention that lol

Normal divs have display: block which stretches the entire width of the parent

@dIREsTRAITS But if you can I would really recommend to use either flexbox or grids to keep your sanity

https://css-tricks.com/snippets/...

https://css-tricks.com/snippets/...

Text align center? Or flexbox, depends on how that element is put together

I think text-justify could be what you are looking for

https://developer.mozilla.org/en-US...

clamp() + vw units

@dIREsTRAITS you want the element to be as wide as the text-content.

* what you probably have now is "display:block" - this is the implicit default for a DIV and makes the element 100% wide.
* you can use "display:inline-block" to size the element to it's contents - (However also does other things such as 2 elements of this style will be placed side by side)

Don't even consider using a specific width, such as "width:50%" as even if that worked it would break if you wrote less or more text-content.

@12bitfloat Maybe I'm too old school but I feel like flex and grid shouldn't be used on a whim as a default. (at least not for beginners)

they are great as you often find yourself needing to center content. But until I'm sure I do - I'd stick with block, inline-block or inline