Не применяется margin-bottom для .linkaboutus

Question

Не могу разобраться, почему не выходит применить margin-bottom к .linkaboutus. Пытаюсь создать отступ от .linkportfolio. Я только обучаюсь, код может выглядеть глупо и с кучей ошибок - понимаю, и если такие есть и вы их укажете - спасибо. Пытаюсь с нуля в качестве практики сверстать страницу с макета. Пока что создаю начальное меню, и столкнулся с проблемой с позиционированием. Двигать вправо-влево выходит, но вверх и вниз нет. Даже применил display:block;, но не помогло. Возможно что-то упустил. Буду благодарен за помощь и возможно HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="/Styles/css/style.css">
</head>
<body>
    <div class="block1">
        <div class="menu">
           <div class="blockhome">
            <div class="home">
                <span class="texthome">
                    <a href="" class="linkhome">HOME</a>
                </span>
                <div class="blockportfolio">
                    <div class="portfolio">
                        <span class="textportfolio">
                            <a href="" class="linkportfolio">PORTFOLIO</a>
                        </span>
                        <div class="blockaboutus">
                            <div class="aboutus">
                                <span class="textaboutus">
                                    <a href="" class="linkaboutus">ABOUT US</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            
            </div>
           </div>
        </div>
    </div>   
</body>
</html>

SCSS:

@import "nullstyle";

body {
  width: 1579px;
  height: 5923px;
  margin: 0 0 0 4px;
  padding: 0 0 1178px;
  background-color: #fff;

  .block1 {
    width: 1579px;
    height: 688px;
    margin: 0 0 108px;
    padding: 29px 164px 111px 163px;
    background-color: #f6f2f2; 
  }
  
  .menu {
    position: relative;
    width: 1249px;
    height: 89px;
    margin: 0 2px 103px 1px;
    padding: 0 432px 0 358px;
    opacity: 0.8;
    background-color: #000;

  .blockhome {
    width: 90px;
    height: 89px;
    margin: 0 40px 0 0;
    padding: 44px 24px 33px 23px;
    box-shadow: -0.3px -2px 35px 0 rgba(0, 1, 1, 0.3);
    background-color: #ff3f40; 
  }

  .linkhome {
    width: 43px;
    height: 12px;
    font-family: OpenSans;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: 0.49px;
    text-align: left;
    color: #e0e0e0; 
  }

    .blockportfolio {
      
    }
    .portfolio {

    }
    .textportfolio {
    
    }
    .linkportfolio {
      position:relative;
      display: block;
      width: 83px;
      height: 12px;
      margin-top:-24px;
      margin-bottom:34px;
      margin-left: 104px;
      font-family: OpenSans;
      font-size: 14px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.71;
      letter-spacing: 0.49px;
      text-align: left;
      color: #e0e0e0
    }
      
      .blockaboutus {
              
  }
      .aboutus {
      
      }
      .textaboutus {
        
      }
      .linkaboutus {
        display: block;
        width: 75px;
        height: 12px;
        margin-left: 241px;
        margin-top:-24px;
       
        font-family: OpenSans;
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.71;
        letter-spacing: 0.49px;
        text-align: left;
        color: #e0e0e0;
      }
      }
      
    }

Answer 1

Необходимо добавить position:relative: Вы видимо удалили, т.к. у вас пустое место в стиле. На выходе будет так

      .linkaboutus {
    display: block;
    width: 75px;
    height: 12px;
    margin-left: 241px;
    margin-top:-24px;
    position:relative;
    font-family: OpenSans;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: 0.49px;
    text-align: left;
    color: #e0e0e0;
  }

БЛОГ НА HUSL

Не применяется margin-bottom для .linkaboutus

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