flex блок <nav>
не выравнивается по центру. Никак не пойму почему. Верхний ведь выровнялся. Как его правильно выровнять?
@import url('https://fonts.googleapis.com/css?family=RobotoBold:700&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=RobotoMedium:500&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=RobotoRegular&subset=cyrillic');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
flex-direction: column;
}
header {
width: 100%;
background: #1e5799;
/* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 0%, #2989d8 0%, #ffffff 38%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 0%, #2989d8 0%, #ffffff 38%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%, #2989d8 0%, #2989d8 0%, #ffffff 38%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ffffff', GradientType=0);
}
header .Logo_and_title {
height: 200px;
color: #323246;
display: flex;
justify-content: center;
align-items: center;
}
header .Logo_and_title .logo img {
padding: 45px;
}
header .Logo_and_title h1 {
font-family: 'RobotoBold', sans-serif;
font-size: 20px;
}
header .Logo_and_title h2 {
font-family: 'RobotoMedium', sans-serif;
font-size: 11px;
}
header .resort {
font-family: 'RobotoRegular', sans-serif;
font-size: 16px;
color: #212121;
text-align: center;
}
header nav {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #000000;
width: 500px;
display: flex;
justify-content: space-around;
align-items: center;
}
header nav .item {
display: flex;
padding: 5px 0;
font-family: 'RobotoRegular', sans-serif;
font-size: 13px;
text-align: center;
}
header .awards {
height: 120px;
border-bottom: 1px solid black;
}
<body>
<header>
<div class="Logo_and_title">
<div class="logo"> <img src="img/logo.png" alt="logo"> </div>
<div class="titles">
<h1>Skadi FLS leaderbord</h1>
<h2>Global list of best skiers in Skadi FLSski resorts</h2>
</div>
</div>
<div class="resort">Schladming: Galsterberg, Hauser Kaibling, Dachstain, Gletscher, Reiteralm, Fageralm, Hoc...</div>
<nav>
<div class="item">Today</div>
<div class="item">The week</div>
<div class="item">Season</div>
</nav>
<div class="awards">
</div>
</header>
<main>
<div class="selected_list">
<div class="num">1</div>
<div class="name">Ivan</div>
<div class="dist">172.1km</div>
</div>
</main>
</body>
width: 100%
илиmargin: 0 auto;
– HamSter 12 фев '18 в 15:26