I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Also, I moved your question outside the code to make it more visible.
No, because when you apply absolute or fixed for an element’s display position, it takes it out of the normal flow. I modified your original code (HTML and CSS) to have everything contained inside the white section (the body). To achieve this, I wrapped the two divs with class=“wheel” in another div with id=“container”. The outer container has position of relative along with the wheel divs. I removed the CSS for the left and right wheels and added display:flex; to the outer container along with using justify-content: space-evenly to have both wheels equal distance apart.
Thank you very much. Now I see clearly how the flow works and how the “position” breaks it.
I still haven’t learn “justify-content” and display yet but still it became study material.