在CSS中，我們可以使用寬度相等的元素來讓我們的頁面布局更加整齊，但是有時候會遇到這樣的問題：明明設置了寬度相等，但是元素卻放不下。

.container {
display: flex;
justify-content: space-between;
}
.item {
width: 20%;
}

在上面的代碼中，我們使用了flex布局，并設置了.item的寬度為20%。但是如果.item元素的數量超過了5個，它們就會超出.container的邊界。這是因為像素的計算會進行四舍五入，而20%乘以5恰好是100%，超過這個比例就會導致元素放不下。

解決這個問題的方法有很多，以下是一些常見的方法：

1. 使用calc函數

.item {
width: calc(100% / 5);
}

這樣就可以確保每個.item元素占據屏幕寬度的五分之一，不會超出容器的邊界。

2. 使用flex-wrap

.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
width: 20%;
margin-bottom: 10px;
}

當容器的寬度不足以放下所有.item元素時，后面的元素就會換行，這樣可以保證元素不會超出容器。

3. 使用@media查詢

.item {
width: 20%;
}
@media screen and (max-width: 768px) {
.item {
width: 25%;
}
}

在小屏幕設備上，我們可以將.item的寬度增加到25%以確保元素能夠適配屏幕。

總之，雖然寬度相等的元素能夠讓我們的頁面布局更加整齊，但是在實際使用中也需要考慮到元素數量和屏幕大小等因素，選擇合適的方法來確保元素不會超出容器邊界。