双栏布局异常求助：右侧内容嵌套左侧栏问题修复

1. 修复HTML标签闭合错误 #

问题根源是左侧栏的<div class="column left">未正确闭合，误用<div>代替</div>，导致右侧栏被错误嵌套在左侧栏内部。修正后的HTML代码如下：

<section class="about" id="about">
    <div class="max-width">
        <h2 class="title"> About Us</h2>
        <div class="about-content">
            <div class="column left">
               <img src="assets/images/AboutUs1.mp4" alt="">
            </div>
            <div class="column right">
                <div class="text">We provide <span class="typing-2"></span> services</div>
                <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ex magni ducimus, numquam voluptates impedit nam cupiditate quidem, officiis inventore iure perferendis provident ipsam itaque! Architecto fugiat vitae odio facere? </p>

                <br>
                <br>
                <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ex magni ducimus, numquam voluptates impedit nam cupiditate quidem, officiis inventore iure perferendis provident ipsam itaque! Architecto fugiat vitae odio facere? </p>
                <br>
                <p>Contact us today to speak with a member of our team.</p>
            </div>
        </div>
    </div>
</section>

2. 修正CSS错误并添加布局规则 #

CSS存在两处错误：一是选择器.about .about-content .move与HTML中右侧栏的类名right不匹配；二是font-size: 600应为font-weight: 600。同时需要给父容器.about-content添加flex布局，让左右栏并排显示。修正后的CSS代码：

.about .about-content {
    display: flex;
    gap: 20px; /* 可选：添加栏间距 */
    align-items: flex-start; /* 可选：顶部对齐 */
}
.about .about-content .left{
    width: 25%;
}
.about .about-content .left img{
    max-height: 450px;
    max-width: 450px;
    object-fit: cover;
    border-radius: 6px;
    width: 100%; /* 可选：让图片适应容器宽度 */
}
.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}
.about .about-content .right .text span{
    color: crimson;
}
.about .about-content .right p{
    text-align: justify;
}

额外提示 #

• 若需让整体内容居中，可给.max-width添加样式：max-width: 1200px; margin: 0 auto;
• 图片使用.mp4格式不符合规范，建议替换为jpg/png等图片格式；若需嵌入视频，应使用<video>标签。

内容的提问来源于stack exchange，提问作者Fav