You don't need to have any creative sensibilities to understand CSS. It is a completely logical language, you just need to grasp the fundamental principles - as with any other language.
I have met many very competent developers who have struggled with "getting" CSS. They didn't get the fundamental logic because they lacked an understanding of the problem it was designed to solve. If someone says CSS is "a series of hacks" or "does not make sense" it is probably because they don't understand the premises for its design.
The design goals of CSS:
* A layout can adjust to any screen/viewport/canvas dimension across any platform - including the printed page.
* Text can be scaled independently of the viewport dimensions. Scaling font size up should not force the use to scroll sideways back and forth - the text should reflow to adjust to the new size.
* Anything can be overridden by the user: E.g the user can scale the font size up regardless of what the designer have specified.
* It should be rendered progressively: the layout of a box may depend on previous content, but not on things not loaded yet - although loading new content might force a "reflow" of previous rendered content.
* CSS applies styling and layout properties to elements in the HTML. So you can paint a border around a HTML element, but you cannot paint a box in pure CSS.
Whether or not you agree with these design goals, CSS makes a lot more sense when you understand them.
Developers sometimes compare CSS unfavorable to GUI toolkits like Windows Forms or to fixed-dimension layout formats like PDF. Those are indeed much simpler to use: You place a control or a line of text somewhere on a canvas, and it generally stays where you put it. But neither format gracefully handle scaling of text, non-standard screen sizes or resizing of the canvas. CSS solves a much more difficult problem than either Windows Forms or PDF attemps to.
So CSS is not about placing object with specific dimensions at specific coordinates. That does not work when all the assumptions behind the dimensions and coordinate may change dynamically. Instead CSS layout is typically defined in relative terms - relative to page width or font size or dimensions of the parent element.
After understanding the design constraints, it is a lot easier to understand the algorithm the browser uses to lay out elements. The is a handful of different algorithms depending on the display property of the current element. This property is the most important CSS property.
inline: Elements flows horizontally left to right as space allows. Line breaks happen when the edge of the container is reached, and the flow continues on the next line.
block: Elements flow top down, one after another. The width of the block is what is available in the container, the height is defined by the content.
table: Child elements are aligned both vertically and horizontally.
flex: Child elements are placed on a single axis either vertically or horizontally, which specified alignment, adjustments and spacing.
(there are more, these are just the most important.)
You will often combine these. Document-oriented layouts typically use inline and block flow. A classical GUI with some panels of fixed size and some panels expanding to the available width will probably use flex.