The <nav> flex block is not centered. I do not understand why. The upper one has leveled off. How to properly align?

 @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% or margin: 0 auto; - HamSter

2 answers 2

It turned out so

 @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 .topmenu { padding: 30px 0; display: flex; justify-content: space-around; } 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: center; align-items: center; } header nav .item { flex: 1; display: flex; justify-content: center; padding: 5px 0; font-family: 'RobotoRegular', sans-serif; font-size: 13px; } 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> <div class="topmenu"> <nav> <div class="item">Today</div> <div class="item">The week</div> <div class="item">Season</div> </nav> </div> <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>

    The upper blocks are not aligned, they are just the full width of the page.