Few things that you can do to improve on your CSS and HTML thinking.

1. Scan and watch a web page and try to understand what HTML elements are used.

2. Observe the web page and try to read what CSS rules might be used to modify HTML elements.

3. Scan and watch the web page and ask yourself what part of it can you recreate and try that. Learn from what doesn't seem similar to original UI and try to implement it. Recreate rule by rule, element by element to understand what is changing. This is important to notice patterns in UI. What changes when will give you more understanding to solve different questions that you will encounter when you build something specific.

4. It is also important to read your code and ask questions about what you wrote.

5. If you find reading your own code difficult after typing it, it is because different parts of code did different things.

6. A good thing to not forget what you did, is to create a text file eg. abc.txt in same repo and write in it what was the issue or thing you wanted to implement and what syntax you chose to use. Also you could save the source from where you learnt it.

7. Another things you can do: try commenting for your own understanding.

8. Practice asking why did I add this rule? What does this rule does? A good thing you can try is to add rules as per the order of implementation. Eg. If you added border weight, then background color and then padding then put it in css rules in same order. It helps you to think faster on what's happening.

Summing up:

The more familiar you become with what is working where, the easier it becomes to debug what doesn't work. If you don't know how it works, you cannot change it soon to something you want. Keep practicing how to watch, scan and re-create things from scratch that will solidify your understanding on how things work under the hood.