导致页面流问题后出现伪

Question

我遇到了:after元素的问题。我用它作为标题中的下划线。由于某种原因，它扰乱了页面的流动。而不是标题位于顶部/居中，在我的实际页面上，标题将进入其下的文本并向左对齐。

这是看起来像：

我无法在小提琴或片段中复制该问题，因此我想知道我的代码中是否有任何可能导致此问题的内容。这个问题在Chrome和Firefox中都有出现。

jsfiddle

.section {
	padding: 70px 0;
	height: auto;
	position: relative;
}
.section-wrap {
    margin: 70px 13%;
	position: relative;
	height: auto;
}
.section-main-title-wrap {
	width: 100%;
	display: block;
	position: relative;
}
.section-main-title {
	position: relative;
	color: blue;
	font-family: 'Muli', sans-serif;
	font-size: 1.8rem;
	width: auto;
	display: inline-block;
	padding: .625rem 0;
	margin-bottom: 40px;
}
.section-main-title:after {
	content: "";
	width: 80%;
	height: 3px;
	background: #489aad;
    bottom: 0;
    position: absolute;
    left: 10%;
}
#home-box-container {
	width: 100%;
	height: auto;
	display: block;
}
.home-box {
	border-right: 2px solid #CDCDCD;
	width: 30%;
	display: inline-block;
	vertical-align: top;
	padding: 0 10px;
}
.home-box:last-child {
	border-right: none;
}
.home-box-title, .home-box-description {
	color: #2c2b2c;
	line-height: 1.4em;
}
.home-box-title {
	margin-bottom: 25px;
	font-family: 'Muli', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	text-align: center;
}
.home-box-description {
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
}

<section class="section">
			<div class="section-wrap">
				<div class="section-main-title-wrap">
					<header class="section-main-title text-center">HELLO</header>
				</div>
				<div id="home-box-container" class="total-center">
					<div class="home-box">
						<h3 class="home-box-title">Paradigm</h3>
						<p class="home-box-description">
						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
						</p>
					</div><div class="home-box">
						<h3 class="home-box-title">Structure</h3>
						<p class="home-box-description">
						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
						</p>
					</div><div class="home-box">
						<h3 class="home-box-title">Integration</h3>
						<p class="home-box-description">
						"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
						</p>
					</div>
				</div>
			</div>
		</section>