SOURCE

<header class="page-header">
	<h1>Franklin Running Club</h1>
</header>
<div class="container">
	<main class="main">
		<h2>Come join us!</h2>
		<p>
			The Franklin Running club mee at 6:00pm every THursday at the town square. Runs are three of five miles, at your own pace.
		</p>
	</main>
	<aside class="sidebar">
		<a href="/twitter" class="button-link">
			follow us on Twitter
		</a>
        <a href="/twitter" class="button-link">
			follow us on Twitter
		</a>
        <a href="/twitter" class="button-link">
			follow us on Twitter
		</a>
	</aside>
</div>

:root {
    background-color: #eee;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

*,::before,::after {
    box-sizing: inherit;
}
/* 如果引入第三方组件，其box-sizing是content-box */
/* 在其顶级容器修改为content-box即可，其子元素都恢复为conten-box */
/* .thrid-party-component {
    box-sizing: content-box;
} */

body * + * {
    margin-top: 1em;
}

header {
    color: #fff;
    background-color: #0072b0;
    border-radius: 0.5em;
    /* 外边距折叠 header 和 h1 */
    /* padding: 1em 1.5em; */
    overflow: auto;
}
.container {
    display: flex;
}

main {
    display: block;
}

.main {
    background-color: #fff;
    border-radius: 0.5em;
    float:left;
    width: 70%;
    /* height: 5em;
    overflow: auto; */
    padding: 1em 1.5em;
}

.sidebar {
    padding: 1.5em;
    background-color: #fff;
    border-radius: .5em;
    float:left;
    width: 30%;
    margin-left: 1.5em;
    margin-top: 0;
    /* 移除顶部外边距 */
}
.button-link {
    background-color: #0090c9;
    color: #fff;
    display: block;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: .5em;
}

/* 总是全局设置 border-box,以便得到预期的元素大小 */
/* 避免明确设置元素的高度，以免出现溢出的问题 */
/* 使用现代的布局技术，比如 display:flex 实现等高或垂直居中 */
/* 如果外边距行为很奇怪，就采取措施防止外边距折叠 */
/* 使用猫头鹰选择器全局设置堆叠元素之间的外边距 */