If you add Bootstrap to your site, you write bootstrap-configuration for it, not normal CSS. You can't use any of the usual code people pass around.

Also, it seems you are doing it for learning, so it wouldn't apply, but a lot of the tricks for eliminating aren't really practical and are best not deployed on real things.

That said, insulating Bootstrap into a layer deeper than your code may help (look at CSS layers). And yeah, like the sibling said, writing it on the browser dev tools is much better than reloading.

My workflow for editing css mostly revolves around playing around with the live css directly in the browser until it looks the way I want it to then making those changes in the file and reloading to make sure it's correct. The immediate feedback of seeing the changes happen makes it rather pleasant

Bootstrap is highly opinionated imho, i.e. it's great if you want to do something that lies within its style or else you'll have a hard time. If that's your case, and of course if this is a possibility, you can consider moving to another framework - say, Tailwind.

CSS was when I stopped being interested in web development.

Use the browsers inspector to see the computed sheet and visualize margins and padding. Also helps detect selectors that aren't quite right as you can see the selector stack.

Small and incremental changes. Test after each change.

Also using the inspector, you can adjust values to find to find the desired computed value. Useful for getting margins/padding pixel perfect.

Break it down. Widgets are ideally reactive to the parent container. Layout is done separate and should be maintained without any widgets.

Be aware of selector precedence. This is why the inspector is helpful. You may need to use something like !important to deal with precedence.

If you are doing a lot with absolutes and relatives (e.g., menus), maybe look at the z-attribute to define how layers should overlap.