I am practiced in html and css, I need to make a header, but nothing works for me!
When pointing at a button (it jumps up). the IMG standing next to it jumps with it. help me anyone
html code:

<div class="Header">
        <img src="Img/logo.png" height="50px" class="logot">
        <h1 class="headH1">My-Giro<h1>
        <img src="Img/phone__1.svg" height="40px" class="imgPhone">
        <button class="buttonHeader">Заказать звонок</button>
    </div>

css code:

.Header {
    display: flex;
    border: 3px solid #292929;
    height: 85px;
    background: #292929;
    color: white;
    overflow: hidden;
    clear: both;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 1.5em;
    border-bottom-right-radius: 1.5em;
}

.logot {
    display: inherit;
    margin-right: 1%;
}

.headH1 {
    display: inherit;
    margin-right: 25%;
}

.buttonHeader {
    margin-left: 25%;
    padding: 0.5em 2em;
    font-size: 0.5em;
    background-color: white;
    color: black;
    border: none;
    transition: 0.2s;
    border-radius: 10px;
    margin-bottom: 0px;
}

.imgPhone {
    display:unset;
    position: absolute;
    margin-top: 3px;
    margin-right: 100px;
}

.buttonHeader:hover {
    padding: 0.5em 2em;
    font-size: 0.5em;
    background-color: #00fbff;
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 10px;
    margin-bottom: 10px;
}

When I hover over the button it is assigned margin top, the picture next to it moves, please help.

nothing asdas i dont know, help me pls