Алеся

Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо! <div class="three navigation items"> <nav> <ul> <li> <div class="navigation__item"></div> <a href="#">Hot themes</a> </li> <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a> </li> <li> <div class="navigation__item"></div> <a href="#">El'Classico</a> </li> </ul> </nav> </div> .navigation { background-color: rgba(31, 30, 30, 0.438); width: 900px; height: 30px; } .navigation li { display: inline-block; padding: 5px 15px; &:hover { content: ""; background-color: rgb(36, 36, 36); cursor: pointer; } } a { color: black; text-decoration: none; font-family: sans-serif; &:hover { content: ""; color: white; } }

Спасибо большое за помощь! Только вот при следующем коде и включении "инструментов разработчика" текст смещается с указанного места. Как вы думаете, что следует исправить? .container_background-image { background-image: url('/img/new_oranges.jpg'); background-size: cover; height: 300px; width: 100%; border: 4px solid #fb9c06; box-sizing: border-box; font-family: 'Roboto', sans-serif; z-index: 1; position: relative; } .banner_text { display: flex; flex-direction: column; align-items: center; position: absolute; z-index: 1; bottom: 20%; line-height: 20px; text-transform: uppercase; margin-left: 100px; } .rabbits, .oranges { margin-top: 10px; padding: 5px 10px; background: rgb(68, 68, 68); color: orange; font-size: 20px; } .oranges { background: orange; color: rgb(68, 68, 68); } p { margin: 0; padding: 5px; }

Подскажите, пожалуйста, как разместить текст таким образом как на картинке (должен позиционироваться от контейнера). Span в p не должен быть. Как лучше всё преобразовать? Заранее спасибо! Код следующий: <div class="banner"> <div class="container_background-image"> <div class="banner_text container"> <span class="rabbits"> <p>Do you like rabbits?</p> </span> <span class="oranges"> <p>Do you like oranges?</p> </span> </div> </div> </div>

Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает. <div class="banner"> <div class="container background-image"> <div class="banner_text"></div> </div> </div> CSS: .background-image { background-image: url('/img/new_oranges.jpg'); background-size: cover; height: 200px; }