He wrote a simple blog. The mistake is that when I add the nav tag and write styles for it, the styles are applied to the header. Explain why.

@import url('https://fonts.googleapis.com/css?family=Suez+One'); * { margin: 0; padding: 0; outline: none; } body, html { width: 100%; height: 100%; } body { background-color: #fcfcfc; font-family: cursive; } header { width: 100%; padding: 10px 0.5% 10px 0%; background-color: #343434; float: left; line-height: 35px; border-bottom: 2px solid silver; } header #logo { cursor: pointer; float: left; width: 85%; } header #logo span { font-size: 1.7em; margin-left: 40px; font-family: 'Suez One', serif; color: #fff; } header #auth>a { border-radius: 5px; padding: 5px 9px; text-decoration: none; color: #fff; background-color: #8c8c8c; border-bottom: 2px solid #b3b3b3; } header #auth>a:not(:last-child) { margin-right: 10px; } header #auth>a:hover { border-bottom: 1px solid #b3b3b3; line-height: none; } nav { width: 100%; background-color: #fff; margin-top: 100px; } 
 <header> <div id="logo"> <span>My Blog</span> </div> <div id="auth"> <a href="#">Sign Up</a> <a href="#">Login</a> </div> </header> <nav> <a href="#">Home</a> <a href="#">Contact me</a> <a href="#">About me</a> </nav>

    3 answers 3

    Set the nav position: relative; display: inline-block; position: relative; display: inline-block;

    • Thank. Can you explain why this happened? - Suleiman Hamrahadzhayev
    • Everything is simple - the nav block was repelled from the body block, while the header block was also repelled. But by setting the nav position: relative and display: inline-block, the nav block became a block-line element. In addition, he began to build on a relative - the header. - Lorkend

    There are several options.
    1) For header in css add overflow: hidden
    2) Between the header and the nav, add a div and add the clear: both style to it;

      Styles do not apply to header. Attach to nav clear: both; You have a field conflict