html - 我的 HTML 中的某个部分的位置有问题

Question

我有一个站点，它有 2 个部分。左侧部分是带有下方菜单的导航栏。旁边的部分是主要部分或必须放置网站内容的地方。我的问题是右侧部分位于距标题几个像素的位置。我怎样才能解决这个问题？我提供了一些图片，让您了解网站的外观。

          /*WRITTEN USING SASS*/
    #side-menu{
    margin-top: 25px;

	.side-menu-bg {
		width: max-content;
			h3 {
				position: absolute;
		    	color: white;
		    	padding: 0px 18px;
		   	 	font-size: 27px;
			}
			img {
			    display: -webkit-box;
			}
	}
	.side-nav-bar {
	        width: 210px;
		    position: unset;
		    margin-top: -3px;
		    display: inline-flex;
		    z-index: 1;
		    flex-direction: column;
		    overflow-x: hidden;
		    background-color: #ffffff;
			a {
			    display: inherit;
			    color: #707070;
			    text-decoration: none;
			    font-size: 15px;
			    padding: 10px 18px;
			    position: relative;
			    border-bottom: 1px solid #e8e8e8;	
			}
			.active-link{
				color: #a40022;
    			border-bottom: 2px solid #8a001c;
			}
	}

	.right-contents {
		float: right;
			.title h3 {
				font-size: 38px;
			}
			.body-content {
		    background-color: #d3d3d3;
		    height: 1094px;
		    width: 738px;
	}
}
}

<div class="wrapper"> <!--to make contents center-->
		<div id="side-menu">
			<div class="side-menu-bg">
				<h3>KU 스타트업</h3>
				<img src="images/bg/bg_03.png">
			</div>
			<div class="side-nav-bar">
				<a href="#" class="active-link">인사말</a>
				<a href="#">창업 비전</a>
				<a href="#">창업 프로세스</a>
				<a href="#">창업부서소개</a>
				<a href="#">찾아오시는 길</a>
			</div>
				<div class="right-contents">
						<div class="title">
						 	<h3>인사말</h3>
							<div class="body-content">
								sample text
							</div>
						</div>
				</div>
		</div>
	</div>

Answer 1

将 margin: 0 添加到您的 h3 标签。 h3 有 margin-to 和 margin-bottom默认情况下。谢谢

.right-contents {
float: right;
    .title h3 {
        font-size: 38px;
        margin: 0; /*add this*/
    }
    .body-content {
    background-color: #d3d3d3;
    height: 1094px;
    width: 738px;