CSS3 ナビゲーションを横並びにする方法

フレキシブルボックスにして、liの隙間を調整します。

nav ul {
	margin-top:16px;
	list-style:none;
	display:flex;
	justify-content:space-around;/*子供たちの間に均等に余白を分けていれる。（両脇にも隙間をいれる）
	justify-content:space-between;/*子供たちの間に均等に余白を分けていれる。（両脇にも隙間をいれない）*/*/
}


<nav>
		<h2>contents</h2>
		<ul>
			<li><a href="#sec1">section 1</a></li>
			<li><a href="#sec2">section 2</a></li>
			<li><a href="#sec3">section 3</a></li>
			<li><a href="#sec4">section 4</a></li>
			<li><a href="#sec5">section 5</a></li>
		</ul>
</nav>