Regarding the problem that the background color background-color is added to ul and the background color does not take effect.
Regarding the problem that margin-top is added to ul and then margin-top does not take effect.
Regarding the issue that the margin-top of the div juxtaposed with the ul does not take effect.
Reason: li did not clear the float.
Solution: Since ul does not directly specify the height, its height expands and contracts according to the li inside. Since li is set to float to the left, the float has to be cleared.
1-1. To clear the float, you can add a display:flow-root style to ul, that is, ul{display:flow-root}.
1-2. To clear the float, you can add an overflow:hidden style to ul, that is, ul{overflow:hidden}.
2-1. Or on the <ul>, add a style to clear the float, that is, ul::after{display: table;content: '';clear: both;}
2-2. Or add a clear floating div before </ul>, ie <div style="clear: both;"></div>