Что можно сделать, чтобы улучшить этот заголовок?

---

Я хотел бы знать:
* является ли этот заголовок профессиональным качеством?
* если нет, то что я могу добавить или изменить, чтобы сделать это так?

Я знаю, что это далеко не профессиональное качество и что я идиот, но у меня возникли проблемы с написанием чистого кода, и я не знаю, какой способ лучше всего сделать такой заголовок. Я пробовал гуглить справку и смотреть на код с других сайтов, но меня всегда озадачивают их примеры.

Я был бы очень признателен, если бы вы дали мне несколько советов, Спасибо!

HTML:

<header id="master-head">
    <div id="master-head-content">

        <span id="master-head-title">Brodie Been</span>

        <span id="master-head-primary">
            <a href="#">My Work</a>
            <a href="#">About Me</a>
        </span>

        <span id="master-head-secondary" class="menu-right">
            <button id="master-head-contact">CONTACT ME</button>
        </span>
    </div>
</header>

СКС:

$softBlack:#404040;
$primaryColor:#348DC8;

@mixin vertCenter{
    position:absolute;
    top:50%;
    transform:translate(0, -50%);
}

body{
    background:#404040;
    font-family:Open Sans;
    
    button{
        display:inline-block;
        position:relative;
        border:none;
        color:white;
        text-decoration:none;
        font-size:14px;
        background:$primaryColor;
        
        &:hover{
            cursor:pointer;
            color:white;
            background:$softBlack;
        }
    }
}








#master-head{
    position:relative;
    height:100px;
    font-size:14px;
    background:white;
    
    #master-head-content{
        width:100%;
        height:100%;
    
        #master-head-title{
            @include vertCenter;
            padding-left:50px;
            font-size:24px;
        }

        #master-head-primary{
            @include vertCenter;
            padding-left:300px;
            
            a{
                text-decoration:none;
                color:inherit;
                margin-right:30px;
                
                &:hover{
                    margin-bottom:-1px;
                    border-bottom:1px solid black;
                }
            }
        }
        
        #master-head-secondary{
            @include vertCenter;
            right:50px;
            
            #master-head-contact{
                width:130px;
                height:50px;
            }
        }
    }
}

Что я уже пробовал:

Я пробовал не совсем позиционировать элементы в заголовке и перемещать кнопку вправо, но это всегда приводит к тому, что кнопка находится слишком низко. Должен ли я просто держать элементы абсолютно расположенными, или есть еще один метод, о котором я не знаю?

У меня также возникли проблемы с установкой правильных идентификаторов и классов для моих элементов, знаете ли вы способ сделать этот код более сухим?

---