关于位置的初学者问题，回到基础

Question

在以下代码中，我有两个与类blog_btn的链接。在html中，它们直接位于带有嵌套标签的p元素之后。我的问题是，当在浏览器中呈现时，两个blog_btn锚标记出现在p标记上方，而不是在其下方。我需要它们下面。谁能告诉我为什么会这样，解决它的最合适的方法是什么

main {
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-flow: nowrap ;
	width: 100%;
	min-height: 600px;

	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
}

main section {
	margin: 20px auto;
	width: 65%;
	min-height: 400px;
	border-radius: 30px 30px 0px 0px;
	background-color: rgb(240,240,240);
	
}


main section article h1 {
	margin: 0 auto;
	padding: 10px 0px 10px 20px;
	border-radius: 30px 20px 0px 0px;
	border: 2px 2px 0px 2px solid rgb(0,0,255);
	font-family: arial;
  	color: rgb(50,50,50);
	letter-spacing: 1px;
	background: linear-gradient(rgb(80,170,240), rgb(60,140,240));
	font-weight: 400;
}

hr {
	width: 95%;
	color: rgb(120,120,120);
}

.blog_content {
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	max-height: 400px;
}


.blog_text {
	width: 42%;
	margin: 3%;
	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: wrap;
  	max-height: 300px; 
  	font-family: "Arial Rounded MT Bold";
  	color: rgb(50,50,50);
  	font-weight: 550;
}

main section article img {
	margin: 3%;
	max-width: 42%;
	border-radius: 4px;
}

.pub_date{
	position: relative;
	float: right;
	margin-right: 40px;
	font-family: "Arial Rounded MT Bold";
  	color: rgb(50,50,50);
  	font-style: italic;
}

.user_name {
	text-decoration: none;
	font-family: arial;
	font-weight: 550;
}

.blog_btn{
	position: relative;
}


main aside {
	margin: 20px auto;
	width: 20%;
	min-height: 400px;
	border: 1px solid black;
}

<main>

	<section>
		<article>
			<h1>My first blog post</h1>
			<hr>

			<div class="blog_content">
					<div class="blog_text"><p>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 laborumLorem 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. </p></div>
				<img src="images/159.jpg" alt="shit hot 159">
			</div>
			<p class="pub_date">January 01 2014 by <a href="#" class="user_name">Cole</a></p>
			<a href="#" class="blog_btn post_go">Full post</a>
			<a href="#" class="blog_btn">Comments</a>
		</article>
	</section>

	<aside>
	</aside>
</main>