What is the best way to understand the browser inspector?

Question

css

Here, for example, this screen prntscr.com/dzt06v it is not clear why the right_test block is smaller in height than its content. And the last comment keeps going down. I can put an indent, but if the text is larger, then the parent block still does not stretch. This is a plugin for WP and there is a mixed layout with mine. And sometimes css from 4 files, and the plugin and my styles and the fucking bootstrap are all mixed up. And I don't see a clear picture. What is the best way to understand the browser inspector?
Here are a couple more screenshots (this is for the first screen, maybe someone will be able to understand why the content climbs onto the block) prntscr.com/dzt2hq prntscr.com/dzt35o

Answer 1

It’s hard to figure it out from the screenshots, everything seems to be normal. Look, maybe you didn’t close the tag somewhere (you can’t see this in the inspector, since the browser itself closes the tags, though sometimes not in good places)

Answer 2

Somewhere the float was not cleaned up.

Answer 3

what styles does .testimonial have?
height
and better link to the code