[Dúvida] Imagem cabeçalho | HTML e CSS: responsividade com mobile-first

Oi, após finalização da aula a minha imagem do usuário está saindo da tela. Sei que preciso ajustar o '.container__imagem' mas toda fez que altero ele fica pior ou muito centralizado.

Teria uma forma mais fácil de ajustar sem ser no chute? Tenho dificuldade na visualização de qual referencia alocar (ex: em, % ou px).

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <title>Alura Books</title>
</head>
<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">PROGRAMAÇÃO</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">FRONT-END</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">INFRAESTRUTURA</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">BUSINESS</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">DESIGN & UX</a>
                </li>
            </ul>
            <img src="img/Logo.svg" alt="Logo da  AluraBooks">
        </div>
        <div class="container">
            <a href="#"><img class="container__imagem" src="img/Favoritos.svg" alt="Meus favoritos"></a>
            <a href="#"><img class="container__imagem" src="img/Sacola.svg" alt="Carrinho de compras"></a>
            <a href="#"><img class="container__imagem" src="img/Usuario.svg" alt="Meu perfil"></a>
        </div>
    </header>
</body>
</html>

.cabecalho__menu-hamburguer{
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.cabecalho{
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container{
    display: flex;
    align-items: center;
}

.container__imagem{
    padding: 1em;
}

.lista-menu{
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container__botao:checked ~ .lista-menu{
    display: block;
}

.lista-menu__titulo, .lista-menu__item{
    padding: 1em;
    background-color: var(--branco);
}

.lista-menu__titulo{
    color: var(--laranja);
}

.lista-menu__link{
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@import url("styles/header.css");


:root{
    --cor-de-fundo: #EBECEE;
    --branco: #FFFFFF; 
    --laranja: #EB9B00;
    --azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
}

body{
    background-color: var(--cor-de-fundo);
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}