添加垂直菜单后文本未正确放置

/* 示例：垂直菜单的CSS样式 */
.vertical-menu {
    width: 200px;
    float: left;
    background-color: #f1f1f1;
}

.vertical-menu a {
    display: block;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
}

.vertical-menu a:hover {
    background-color: #ddd;
}

<!-- 示例：使用Flexbox布局 -->
<div class="container">
    <div class="vertical-menu">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </div>
    <div class="content">
        <p>This is the main content area.</p>
    </div>
</div>

<style>
.container {
    display: flex;
}

.vertical-menu {
    width: 200px;
    background-color: #f1f1f1;
}

.content {
    flex-grow: 1;
    padding: 20px;
}
</style>