Float moves everything to the one side, HTML and CSS

I have a problem with an image and 'float: right;'. It moves everything on the image. I really need help. I am just a beginner. Any help will be appreciated. Please help me. My HTML code:

    <section id="header">
        <div class="container">
            <img scr="./img/logo.png" class="logo">

            <div class="header-text">
                <h1>Choose the cheapest teachers</h1>
                <span class="square"></span>
                <p>Here you can find the best people<br>Start working for us right now</p>
                <button class="common-btn">Read more</button>

                
            </div>
        </div>

My CSS code:

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font: Nunito;
}

#header {
    height: 100vh;
    background-image: url(img/image3.png);
    background-position: center;
    background-size: cover;
    width: 80vh;
    height: 80vh;
    padding:35px;
    float: right;
}
    


}
.conatiner {
    margin-right: 100px;
    margin-left: 100px;
}

.logo {
    margin-top: 30px;
    width: 100px;
    
}
.header-text{
    max-width: 350px;
    margin-top: 140px;
}