避免CSS布局中的区块重叠：正确使用HTML标签与Display属性

/* 应用于非标准标签 sec-2 */sec-2 {  width: var(--mobile-width);  display: flex; /* 尽管设置了flex，但可能因标签非标准而行为异常 */  flex-direction: column;}/* 应用于 div.sec3 */.sec3 {  width: var(--mobile-width); /* 原始代码中存在此属性 */  background-color: hsl(238, 22%, 44%);  display: flex; /* 原始代码中存在此属性 */  flex-direction: column;  justify-content: center;  color: white;  padding: 50px;}

<!-- 将  替换为 
 -->
   
   
   
      
Stay productive, wherever you are
      
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus         doloribus ipsa cum. Sapiente quisquam error magnam odit repellendus         nihil dolorem quis      
      
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus         doloribus ipsa cum. Sapiente quisquam error magnam odit repellendus         nihil dolorem quis      
      
         See how Fylo works       
      
         
         
         
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui omnis ducimus veniam, cupidita         
         
            
            
            
               
                  Kyle Burton               
               
                  Founder & CEO, Huddle               
            
         
      
   
   
      
         Get early access today      
      
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sapiente a alias libero labore rerum assumenda cupiditate illum iure adipisci. Veniam vel voluptatem deleniti officia culpa sed, asperiores eveniet fugiat.      
   
                     Get Started For Free         

* {  box-sizing: border-box;}:root {  --mobile-width: 375px;  --light-blue: hsl(224, 93%, 58%);}.mmargin {  margin: 50px auto;}body {  margin: 0;  padding: 0 ;  font-family: "Open Sans", sans-serif;  font-weight: 400;}h1,h2,h3 {  font-family: "Raleway", sans-serif;  font-weight: 700;}button:hover {  opacity: 0.5;  cursor: pointer;}/* sec-2 样式更新为类选择器 */.sec-2 {  width: var(--mobile-width);  display: flex; /* 保持 flex 布局 */  flex-direction: column;}.sec-2 .image {  margin-bottom: 50px;}.sec-2 .image img {  max-width: 100%;}.sec-2 .text h2 {  font-size: 20px;  text-align: center;  margin: 30px 0;}.sec-2 .text p.p {  margin: 50px auto;  text-align: center;  color: #3da08f;  position: relative;}.sec-2 .text p.p:hover {  opacity: 0.5;  cursor: pointer;}.sec-2 .text p.p::before {  content: "";  width: 175px;  height: 2px;  background-color: #3da08f;  position: absolute;  left: 50%;  transform: translateX(-50%);  bottom: -5;}.sec-2 .text p.p img {  width: 25px;  vertical-align: middle;}.sec-2 .text .card {  display: flex;  flex-direction: column;  box-shadow: 0 0 10px rgb(197, 197, 197);  padding: 20px;}.sec-2 .text .card .image1 {  width: 40px;}.sec-2 .text .card .image1 img {  width: 50%;}.sec-2 .text .av {  display: flex;  align-items: center;  gap: 15px;  margin: 30px 0;}.sec-2 .text .av .image2 {  width: 50px;}.sec-2 .text .av img {  max-width: 100%;  border-radius: 50%;}.sec-2 .text .txt {  display: flex;  flex-direction: column;  gap: 5px;}.sec-2 .text .txt h3 {  margin: 0;}.sec-2 .text .txt p {  margin: 0;}/* .sec3 样式调整 */.sec3 {  background-color: hsl(238, 22%, 44%);  display: block; /* 确保其作为块级元素独立渲染 */  /* 原始的 width: var(--mobile-width); 在解决方案中被移除，这有助于其自然流动或由父容器控制宽度 */  flex-direction: column; /* 如果需要内部flex布局，可保留 */  justify-content: center;  color: white;  padding: 50px;}.sec3 .text h2 {  text-align: center;}.sec3 .text p {  text-align: center;  font-size: 18px;  line-height: 1.5;}.sec3 form {  margin: 30px auto;}.sec3 form input {  width: 50%;  margin-bottom: 10px;  opacity: 0.3;}.sec3 form button {  width: 50%;  text-align: center;}