Are there guidelines when it comes to content sizing?

I've been learning to code for some time and I've sure learned quite a lot, but styling has always been a pain in the ass for me (it's very embarrassing, I know). I absolutely have no idea how many pixels a nav bar should have or how wide any component should be. If it's just too small/big for me, I'll resize it. Size units? No idea. Don't get me wrong. Percentages, ems and metrics - I'm aware of its existence and what they do, but I do everything in pixels. I'm not saying that things I code look horrendous and not responsive. It's all try and error until things look aesthetically pleasing and it takes me so much time to make things look pretty.

Let's say I need to make something simple like a popup modal in CSS. I might wrap the hidden content in a div, with a class of modal, its content in a div with a class of modal__content, make a button to close it and some text in it. Semantically correct HTML is not a problem. Animations and colours? Fine, you got it. I just have no clue how to style it. That's when I realise I know CSS just in theory. I can code it, but I just have no idea if the modal should be 300x200 px box for a desktop screen or maybe use percentages?

If you have some saved articles or a book you could recommend, I'd be very very grateful.

I've used Bootstrap and Semantic UI. These are very cool and convenient tools, but I wish to know some in-depth guidelines when it comes sizing since I don't really know what something should actually look like. Most of the time I'm just eyeballing all font sizes, paddings and margins etc.