enter image description here enter image description here

* { padding: 0; margin: 0; } body { width: 100%; font-family: 'Trebuchet MS', sans-serif; } /*END GENERAL STYLES*/ /*MAIN MENU*/ .main-menu { padding: 40px 180px 40px 180px; } .logo { display: inline-block; } .logo h2 { float: left; } .menu { float: right; } .menu li { list-style-type: none; display: inline-block; padding: 8px 10px 0px 10px; } .menu a { text-decoration: none; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>Company Name</title> </head> <body> <div class="container"> <header class="main-menu"> <div class="logo"> <h2>Company Name</h2> </div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Contact</a></li> </ul> </div> </header> </div> </body> </html>

  • I understand this because of the width: 100% - Litash
  • And how should it be if the width is not enough? - Surfin Bird
  • okay, then should the media query come into effect?) - Litash
  • Well, it is difficult to advise any decision if it is not known what effect should be achieved. So the current version, as for me, is great. :) - Surfin Bird
  • @SurfinBird understood), rather, it is already necessary to watch the lessons on adaptability to me :) - Litash

0