在某些情况下，具有百分比宽度的居中div会缩小

Question

I have a site that places content inside a div with the following styling:

.container {
  padding-top: 40px; /*This is to leave space for a floating*/
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  background-color: white;
  box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.5);
}

This works fine on two pages but on a third one, the div shrinks to about half it's normal width, and I cant figure out why. The only obvious difference is that this page contains a list while the others are just paragraphs, but removing the list doesn't fix the problem. Here are two pens, the page that works and the one that doesn't . The images are missing on the pens but the effect is the same.

Thanks in advance!

Answer 1

我不明白您为什么要使用position: absolute body position: absolute ，但如果将其取出，您的问题就解决了...

Answer 2

You have position:absolute in body. In your working examples the text is wide enough so that your its achieving full width but in 3rd example text is small so there is a problem.

You need to assign width:100% in body or if there is no use just remove it.