Не работает container в css?
здравствуйте я столкнулся с проблемой в css с margin
не работает код контейнера вообще
вот код
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="container"> <div class="header_inner"> <a href="#" class="logo"> <img src="/images/logo.svg" alt="logo"> </a> <nav class="menu"> <ul class="menu__list"> <li class="menu__item"> <a href="#" class="menu__link">dd</a> </li> <li class="menu__item"> <a href="#" class="menu__link">dff</a> </li> <li class="menu__item"> <a href="#" class="menu__link">ff</a> </li> <li class="menu__item"> <a href="#" class="menu__link">gg</a> </li> <li class="menu__item"> <a href="#" class="menu__link">gs</a> </li> </ul> </nav> </div> </div> </header> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="container"> <div class="header_inner"> <a href="#" class="logo"> <img src="/images/logo.svg" alt="logo"> </a> <nav class="menu"> <ul class="menu__list"> <li class="menu__item"> <a href="#" class="menu__link">dd</a> </li> <li class="menu__item"> <a href="#" class="menu__link">dff</a> </li> <li class="menu__item"> <a href="#" class="menu__link">ff</a> </li> <li class="menu__item"> <a href="#" class="menu__link">gg</a> </li> <li class="menu__item"> <a href="#" class="menu__link">gs</a> </li> </ul> </nav> </div> </div> </header> </body> </html>
вот css style
*, *::after, *::before{ box-sizing: border-box; } .container{ width: 100%; max-width: 1140px; margin: 0 auto; background-color: rgb(61, 224, 29); } |
*, *::after, *::before{ box-sizing: border-box; } .container{ width: 100%; max-width: 1140px; margin: 0 auto; background-color: rgb(61, 224, 29); }
так же присутсвует файл reset.css:
*{padding: 0;margin: 0;border: 0;} *,*:before,*:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} :focus,:active{outline: none;} a:focus,a:active{outline: none;} nav,footer,header,aside{display: block;} html,body{ height:100%;width:100%; font-size:100%;line-height:1;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;} input,button,textarea{font-family:inherit;} input::-ms-clear{display: none;} button{cursor: pointer;} button::-moz-focus-inner{padding:0;border:0;} a,a:visited{text-decoration: none;} a:hover{text-decoration: none;} ul li{list-style: none;} img{vertical-align: top;} h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: inherit;} a{color:inherit;} |
*{padding: 0;margin: 0;border: 0;} *,*:before,*:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} :focus,:active{outline: none;} a:focus,a:active{outline: none;} nav,footer,header,aside{display: block;} html,body{ height:100%;width:100%; font-size:100%;line-height:1;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;} input,button,textarea{font-family:inherit;} input::-ms-clear{display: none;} button{cursor: pointer;} button::-moz-focus-inner{padding:0;border:0;} a,a:visited{text-decoration: none;} a:hover{text-decoration: none;} ul li{list-style: none;} img{vertical-align: top;} h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: inherit;} a{color:inherit;}
Дополнительно:
Какой padding у вас не работает?
В коде я вижу два и оба по нулям.
приношу извинения за ошибку
Потому что с тем кодом, который вы выложили всё ок.
А вообще, лучше без ресета жить.
нашел ответ помогло просто очистить кеш и удалить из истории сайт localhost
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того, чтобы container в CSS работал корректно, необходимо убедиться, что все свойства и значения заданы правильно. Вот несколько возможных причин, почему container может не работать:
1. Неверное использование свойства display: Убедитесь, что для container задано свойство display: block; или display: flex; в зависимости от того, какой тип контейнера вы хотите создать.
2. Неправильное позиционирование: Проверьте, что ваш container имеет правильное позиционирование, например, relative или absolute, в зависимости от вашего дизайна.
3. Неправильные размеры: Убедитесь, что container имеет правильные размеры, чтобы он мог вмещать все элементы внутри него.
Пример использования container в CSS с помощью тега
: <pre lang="css"> .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: lightblue; }
Если после проверки всех этих пунктов container все еще не работает, попробуйте очистить кеш браузера или проверить наличие ошибок в консоли разработчика. Если проблема все равно остается, уточните свой вопрос с более подробными деталями или кодом, чтобы мы могли помочь вам дальше.