Itens do Menu e Logo não se ajustam dentro da DIV | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Estou fazendo o conteúdo das aulas de uma forma um pouco diferente do professor, mas tentando seguir a mesma linha de raciocínio. Porém acho que acabei me confundindo ao não fazer o código como o dele.

Da forma que fiz, não consegui alinhar os itens do Menu e a Logo dentro da "caixa" que criamos com a tag "div". Quando eu adiciono o position, width e margin dentro da classe da div, os itens do menu ficam desalinhados e a logo não sai do lugar.

Não sei se consegui ser claro o suficiente, mas se alguém puder me ajudar a identificar o que eu fiz de errado eu ficaria muito grato.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Produtos - Barbearia Alura</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/produtos.css">
</head>

<body>
    <header class="cabecalho">

        <h1><img src="img/logo.png" alt=""></h1>

        <div class="secao-menu">
            <nav>
                <ul class="menu">
                    <li class="menu_item"><a class="menu_item-lista" href="#">Home</a></li>
                    <li class="menu_item"><a class="menu_item-lista" href="#">Produtos</a></li>
                    <li class="menu_item"><a class="menu_item-lista" href="#">Contato</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>

</html>

.cabecalho {
    background: lightgray;
    padding: 20px 0;
}

.secao-menu {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

.menu {
    position: absolute;
    top: 110px;
    right: 0;
}

.menu_item {
    display: inline;
}

.menu_item-lista {   
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    margin: 0 0 0 15px;
}