我的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;

}

Answer 2

<style>
/*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 {
   width: 65%;
   margin-top: -3px;
    display: inline-flex;
        .title h3 {
            font-size: 38px;
        }
        .body-content {
        background-color: #d3d3d3;
        height: 1094px;
        width: 738px;
}
</style>