Html 为什么即使我以百分比设置宽度，浏览器收缩时div也会重叠？

我将屏幕分为两个

div

s，宽度分别为40%和59%，但每当我缩小浏览器时，第二个div与第一个div重叠。我哪里出了问题

#watch-container{
    width: 40%;
    height: 100vh;
    display: inline-block;
}
#watch-container .watch-skin{
    height: 60%;
    margin-left: 170px;
    margin-top: 110px;
}

#desc-container{
    width: 59%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    display: inline-block;
    vertical-align: top;
}

#content-wrapper{
    width: 100%;
}

您可以运行下面的代码，或查看代码笔-

*{
保证金：0；
填充：0；
框大小：边框框；
}
导航{
背景色：#233D53；
高度：60px；
}
导航标志{
高度：40px；
左边距：45像素；
边缘顶部：10px；
}
#手表盒{
宽度：40%；
高度：100vh；
显示：内联块；
}
#手表容器，手表皮{
身高：60%；
左边距：170px；
利润上限：110像素；
}
#描述容器{
宽度：59%；
高度：100vh；
字体系列：“蒙特塞拉特”，无衬线；
显示：内联块；
垂直对齐：顶部；
}
#内容包装器{
宽度：100%；
}
#描述容器h1{
填充顶部：140px；
边缘底部：20px；
字体大小：40px；
字体大小：1000；
}
#颜色标题{
字号：18px；
}
#描述容器p:第n个子容器（2）{
垫底：10px；
宽度：70%；
字号：500；
}
#描述容器h3{
垫底：10px；
}
#颜色容器按钮{
高度：33像素；
宽度：45px；
边缘顶部：10px；
右边距：10px；
光标：指针；
边界半径：4px；
边界：无；
大纲：无；
}
#颜色容器按钮：第n个子项（1）{
背景色：#23211f；
}
#颜色容器按钮：第n个子项（2）{
背景色：#ca3d22；
}
#颜色容器按钮：第n个子项（3）{
背景色：#5681；
}
#颜色容器按钮：第n个子项（4）{
背景色：#8a5362；
}
#描述容器>按钮：最后一个子项{
边缘顶部：25px；
背景色：rgb（255,153,0）；
宽度：120px；
高度：40px；
大纲：无；
边界半径：5px；
边框：1px实心rgb（218131,0）；
光标：指针；
字体系列：“蒙特塞拉特”，无衬线；
颜色：黑色；
字号：700；
}
#描述容器>按钮：第n个最后一个子项（3）
{
宽度：100px；
光标：指针；
高度：30px；
左边距：10px；
边界半径：4px；
背景色：rgb（221221221221）；
大纲：无；
边界：无；
字体系列：“蒙特塞拉特”，无衬线；
字号：700；
}
#描述容器>按钮：第n个最后一个子项（4）
{
宽度：60px；
高度：30px；
边界半径：4px；
背景色：rgb（221221221221）；
光标：指针；
大纲：无；
边界：无；
字体系列：“蒙特塞拉特”，无衬线；
字号：700；
}

FitBit 20-最智能的手表
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。
这是一个建筑设计师和自然人的梦想



选择颜色


特征
时间
心率


立即购买

实际上，div没有重叠。

#watch container内的图像。watch skin

包含

左边距
170px
这会导致图像移出其容器。如果删除该值，您的屏幕将按预期工作

#watch-container .watch-skin{
    height: 60%;
    /* Remove this one */
    /* margin-left: 170px; */
    margin-top: 110px;
}

如果您感兴趣，可以在
css
中使用
display:flex
实现。只有你需要改变的是下面提到的

#content-wrapper {
  width: 100%;
  display: flex;
}

#watch-container .watch-skin {
  height: 60%;
  margin-left: auto;
  margin-top: 110px;
}

这将自动
marin left
，与图像的可用空间相关


*{
保证金：0；
填充：0；
框大小：边框框；
}
导航{
背景色：#233D53；
高度：60px；
}
导航标志{
高度：40px；
左边距：45像素；
边缘顶部：10px；
}
#手表盒{
宽度：40%；
高度：100vh；
显示器：flex；
}
#手表容器，手表皮{
身高：60%；
左边距：自动；
利润上限：110像素；
}
#描述容器{
宽度：59%；
高度：100vh；
字体系列：“蒙特塞拉特”，无衬线；
显示：内联块；
垂直对齐：顶部；
}
#内容包装器{
宽度：100%；
显示器：flex；
}
#描述容器h1{
填充顶部：140px；
边缘底部：20px；
字体大小：40px；
字体大小：1000；
}
#颜色标题{
字号：18px；
}
#描述容器p:第n个子容器（2）{
垫底：10px；
宽度：70%；
字号：500；
}
#描述容器h3{
垫底：10px；
}
#颜色容器按钮{
高度：33像素；
宽度：45px；
边缘顶部：10px；
右边距：10px；
光标：指针；
边界半径：4px；
边界：无；
大纲：无；
}
#颜色容器按钮：第n个子项（1）{
背景色：#23211f；
}
#颜色容器按钮：第n个子项（2）{
背景色：#ca3d22；
}
#颜色容器按钮：第n个子项（3）{
背景色：#5681；
}
#颜色容器按钮：第n个子项（4）{
背景色：#8a5362；
}
#描述容器>按钮：最后一个子项{
边缘顶部：25px；
背景色：rgb（255,153,0）；
宽度：120px；
高度：40px；
大纲：无；
边界半径：5px；
边框：1px实心rgb（218131,0）；
光标：指针；
字体系列：“蒙特塞拉特”，无衬线；
颜色：黑色；
字号：700；
}
#描述容器>按钮：第n个最后一个子项（3）{
宽度：100px；
光标：指针；
高度：30px；
左边距：10px；
边界半径：4px；
背景色：rgb（221221221221）；
大纲：无；
边界：无；
字体系列：“蒙特塞拉特”，无衬线；
字号：700；
}
#描述容器>按钮：第n个最后一个子项（4）{
宽度：60px；
高度：30px；
边界半径：4px；
背景色：rgb（221221221221）；
光标：指针；
大纲：无；
边界：无；
字体系列：“蒙特塞拉特”，无衬线；
字号：700；
}

FitBit 20-最智能的手表
Lorem，ipsum dolor-sit
#watch-container .watch-skin{
    height: 60%;
    margin-left: 170px;
    margin-top: 110px;
}

#watch-container .watch-skin{
    width: 100%;
    margin: auto;
    margin-top: 110px;
}

#watch-container .watch-skin{
    height: 60%;
    margin-left: auto;
    margin-right:auto;
    display:block;
    margin-top: 110px;
}

..... {
  height:100%;
  min-height:100vh;
}