Help: CSS issue/Noobness

I’M JUST PRACTICING TO HONE THE LITTLE I’VE LEARNED… SHOULDN’T THE WHITE SQUARE ENVELOPE THE ANIMATIONS TOO? IF NOT, HOW?

<!DOCTYPE html>
<html>
<style>
html {
	background-color: gray;
}
body {
	margin:auto;
	font-family: arial;
	width: 940px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
}
#page-head {
	font-family: monospace;
	color: black;
}
.wheel {
	width: 200px;
	height: 200px;
	background-color: transparent;
	margin: auto;
	position: fixed;
	border-radius: 50%;
	margin: auto;
	animation-name: rotation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
.wheel-detail {
	width:40px;
	height:40px;
	background-color: orange;
	position: absolute;
	border-radius: 50%;
}
#left-wheel {
	left: 20%;
}
#right-wheel {
	left: 60%;
}
#dt1{
	top: 40px;
	left: 40px;
}
#dt2{
	top: 40px;
	left: 120px;
}
#dt3{
	top:120px;
	left:40px;
}
#dt4{
	top:120px;
	left:120px;
}
@keyframes rotation{
	100%{
		transform: rotate(360deg)
	}
}
</style>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title meta="project">Project</title>
	<link rel="stylesheet" href="css/bootstrap-reboot.min">
	

</head>

<body>
	<h1 id="page-head">Wheel</h1>
	<div class="wheel" id="left-wheel">
		<div class="wheel-detail" id="dt1"></div>
		<div class="wheel-detail" id="dt2"></div>
		<div class="wheel-detail" id="dt3"></div>
		<div class="wheel-detail" id="dt4"></div>
	</div>
	<div class="wheel" id="right-wheel">
		<div class="wheel-detail" id="dt1"></div>
		<div class="wheel-detail" id="dt2"></div>
		<div class="wheel-detail" id="dt3"></div>
		<div class="wheel-detail" id="dt4"></div>
	</div>
	<footer>Powered by me</footer>
</body>
</html>

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.

markdown_Forums

Also, I moved your question outside the code to make it more visible.

thank you so much, i’m still new to this!

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.

HTML

<body>

  <h1 id="page-head">Wheel</h1>
  <div id="container">
    <div class="wheel" id="left-wheel">
      <div class="wheel-detail" id="dt1"></div>
      <div class="wheel-detail" id="dt2"></div>
      <div class="wheel-detail" id="dt3"></div>
      <div class="wheel-detail" id="dt4"></div>
    </div>
    <div class="wheel" id="right-wheel">
      <div class="wheel-detail" id="dt1"></div>
      <div class="wheel-detail" id="dt2"></div>
      <div class="wheel-detail" id="dt3"></div>
      <div class="wheel-detail" id="dt4"></div>
    </div>
  </div>
  <footer>Powered by me</footer>

</body>

CSS

html {
  background-color: gray;
}
body {
  margin: 0 auto;
  font-family: arial;
  width: 940px;
  background-color: white;
}

#container {
  position: relative;
  display: flex;
  justify-content: space-around;

  margin: auto;
}

#page-head {
  font-family: monospace;
  color: black;
}
.wheel {
  width: 200px;
  height: 200px;
  background-color: transparent;
  position: relative;
  border-radius: 50%;
  animation-name: rotation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline-block;
}
.wheel-detail {
  width: 40px;
  height: 40px;
  background-color: orange;
  position: absolute;
  border-radius: 50%;
}

#dt1, #dt2 {
  top: 40px;
  left: 40px;
}
#dt2 {
  left: 120px;
}
#dt3, #dt4 {
  top: 120px;
  left: 40px;
}
#dt4 {
  left: 120px;
}

@keyframes rotation {
  100% {
    transform: rotate(360deg);
  }
}


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.

thanks for the teaching.

To understand flexbox, I recommend A Guide to Flexbox.