1. In the footer part of Mu course net, container uses margin:0 auto in the middle, and now there are questions about shrinking the screen
2. The related code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
overflow:visible;
}
.demo-wrapped{
width: 1202px;
height: 400px;
margin: 0 auto;
text-align: center;
}
.demo-header{
background: blue;
}
.box{
text-align: right;
background: orange;
}
.box img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="demo-header">
<div class="demo-wrapped">
<div class="box">
<img src="images/300.png" alt="">
<img src="images/300.png" alt="">
<img src="images/300.png" alt="">
</div>
</div>
</div>
</body>
</html> 3. Question:
width: value; margin:0 auto; when the screen becomes smaller, the width of the body becomes smaller, and the margin will become negative
4. The picture is as follows
5. However, there is no negative value in the container part of the container of footer. It keeps margin-left and margin-right at 24px all the time. Why is that?