@font-face { font-family: 'Bebas Neue'; src: url('BebasNeue-webfont.ttf') format('truetype'); font-weight: 300; } *, *:before, *:after { box-sizing: border-box; } a{ text-decoration: none; } ul{ list-style: none; } body{ font-family: sans-serif; margin: 0; background-color: #42c1b0; } html{ font-size: 100%; } .meta{ height: auto; min-width: 100% auto; margin: 0 auto; } .main{ background-color: #fff; display: flex; justify-content: space-between; align-items: center; height: 80px; position: relative; padding: 0 180px 0 150px; } .header{ height: 80px; justify-content: space-between; align-items: center; display: flex; width: 1700px auto; padding: 0 180px 0 150px; } .logo h1{ font-family: 'Lobster', cursive; font-size: 50px; color: #3cc3b5; } .korzina { display: inline-block; white-space: nowrap; } .korzina img, .korzina h2 { display: inline-block; vertical-align: middle; } .korzina h2{ color: #a1a1a1; font-size: 25px; font-family: 'Lobster'; font-weight: 300; position: relative; left: 5px; top: 5px; } /*Search form*/ .search img{ position: relative; top: 4px; } .search-form { display: inline-block; position: relative; } .search-form-input { width: 435px; height: 35px; line-height: 28px; margin: 0; padding: 0 38px 0 10px; border: 1px solid #d5d5d5; border-radius: 0; background-color: white; box-sizing: border-box; font-family: Tahoma, sans-serif; font-size: 13px; } .search-form-btn { /* Позиционирование относительно <form> */ position: absolute; right: 2px; /* 2px - размер border'а поля формы */ top: 2px; width: 28px; height: 28px; line-height: 28px; /* Просто тюнинг внешнего вида */ color: #666; font-weight: bold; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; text-align: center; cursor: pointer; } /*and search form*/ /*Menu*/ .nav{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 35px; position: relative; } .menu{ width: 1580px; background-color: #4ccfc1; padding: 0 120px 0 100px; } .menu ul{ list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; } .menu ul li{ color: #fff; font-size: 1.5em; border-right: 2px solid #fff; display: inline-block; float: left; padding: 0 30px; font-family: 'Bebas Neue'; text-transform: uppercase; font-weight: 100; } .menu ul a:last-child li{ border:none } /*end Menu*/ <body> <div class="meta"> <div class="main"> <div class="header"> <div class="logo"> <h1>Aditii</h1> </div> <div class="search"> <form action="#" class="search-form"> <input type="search" class="search-form-input" placeholder="" /> <button type="submit" class="search-form-btn"> <!-- Сюда можно запихнуть любую картинку на свой вкус --> <img src="img/Search%201.png" alt=""> </button> </form> </div> <div class="korzina"> <img src="img/Korzinka.png" alt=""> <h2>$300</h2> </div> </div> </div> <!--- Menu ---> <div class="nav"> <div class="menu"> <ul> <a href=""><li>Home</li></a> <a href=""><li>Sale</li></a> <a href=""><li>Handbags</li></a> <a href=""><li>Wallets</li></a> <a href=""><li>Accessories</li></a> <a href=""><li>Mens Store</li></a> <a href=""><li>Shotes</li></a> <a href=""><li>Vintage</li></a> <a href=""><li>Services</li></a> <a href=""><li>Contact us</li></a> </ul> </div> </div> <!--- end menu ----> </body> The problem is that when viewing a site on devices with other resolutions, the site is displayed incorrectly:
As you can see in the screenshot, the background is visible outside the site. Tell me how can I remove it or what can I do about it?
.main{padding: 0 120px 0 100px;}and put.nav{width:100%}- Alex