Не вижу элемент border в div. position fixed

Question

Приветы! Как здорово что есть такой сайт! Я здесь впервые. К делу! На сайте сделал вверху фиксированную панель навигации и хочу видеть её с рамкой, но не получается отобразить её. Что ни так пишу в коде? Ну и... как равномерно разбить элементы li по ширине экрана? Спасибо

<div style="position: fixed; top: 0; right: 0; left: 0; height: 100px; background: rgb(176, 255, 160); border-bottom: 3px;">
      <ul>
          <li><a href="#wiagc">Что такой лотерея Green Card?</a></li>
          <li><a href="#cfp">Требования для участия.</a></li>
          <li><a href="#hta">Как подать заявку</a></li>
      </ul>
    </div>
    ```

Answer 1

<div style="position: fixed; top: 0; right: 0; left: 0; height: 100px; background: rgb(176, 255, 160); border-bottom: 3px solid black;">
      <ul>
          <li><a href="#wiagc">Что такой лотерея Green Card?</a></li>
          <li><a href="#cfp">Требования для участия.</a></li>
          <li><a href="#hta">Как подать заявку</a></li>
      </ul>
</div>

Answer 2

Для выравнивания по ширине используйте flex например, а border надо дополнительно задавать цвет и тип.

div{
border-bottom:solid 3px black;
position: fixed; 
top: 0; 
right: 0; 
left: 0; 
height: 50px; 
background: rgb(176, 255, 160);
}
ul{
list-style:none;
display:flex;
justify-content: space-around;
height: 100%;
position: relative;
padding:0;
margin:0;
}
li a{
 text-decoration: none;
 color: #555;
 width: 100%;
 height: 100%;
 text-align: center;
 display: block;
}
li a:hover{
color: #000;
background: rgb(176, 255, 200 , 0.5);
}

<div>
      <ul>
          <li><a href="#wiagc">Что такой лотерея Green Card?</a></li>
          <li><a href="#cfp">Требования для участия.</a></li>
          <li><a href="#hta">Как подать заявку</a></li>
      </ul>
    </div>

БЛОГ НА HUSL

Не вижу элемент border в div. position fixed

Ответы (2 шт):