Why is my position of an item wrong? (HTML & CSS)-CodePudding

I am making a website. I have a problem now. This is my website right now. As you can see the blue logo in the middle must be against the top. Does anyone know how I can get it against the top? Does that has to do with the flex-box? If that's the case can I get some explanation about the flexbox? Thanks in advance!
HTML:

<html>
<head>
    <meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
    <title>Korps Commandotroepen</title>
    <link rel="stylesheet" href="index2.css">
</head>
<body>
    
    <div >
        <div >
            <div id="mainbox" onclick="openFunction()">&#9776;</div>
            <div >
                <ul>
                    <li><a href="#"> <img src="images/minis1.png" ></a></li>  
                </ul>
            </div>
            <div >
                <h1><span ></span></h1>
                <a href="#">Ontdek meer</a>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        var typed = new Typed(".auto-type", {
            strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
            typeSpeed: 150,
            backSpeed: 150,
            loop: false,
        });
    </script>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
.header{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}
.col-1{
    flex-basis: 100%;
    flex-grow: 1;
    background-image: url(images/kct.jpg);
    background-size: cover;
    background-position: center;
    color: #fff
}
.logo{
    width: 55px;
    cursor: pointer;
}
.nav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav ul{
    display: flex;
    list-style: none;
}
.left-text{
    width: 70%;
    margin: 230px auto 0;
 }
.left-text h1 span{
    font-size: 50px;
    font-weight: 500;
}
.left-text a img{
    width: 60px;
    margin-right: 20px;
}
.left-text a{
    /* display: flex; */
    align-items: center;
    text-decoration: none;
    margin: 30px 0 30px;
    display: inline-block;
    background: transparent;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 15px 50px;
    border-radius: 30px;
    border: 4px solid #fff;  /*922125*/
}
.left-text a:hover{
    background: #fff;
    color: #333
}
#mainbox{
    font-size: 35px;
}

CodePudding user response：

The problem is that #mainbox takes the whole width and .nav goes down. One solution would be to make .nav position absolute and top 0.

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
.header{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
}
.col-1{
    flex-basis: 100%;
    flex-grow: 1;
    background-image: url(images/kct.jpg);
    background-size: cover;
    background-position: center;
    color: #fff
}
.logo{
    width: 55px;
    cursor: pointer;
}
.nav{
    position:absolute;
    top:0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav ul{
    display: flex;
    list-style: none;
}
.left-text{
    width: 70%;
    margin: 230px auto 0;
 }
.left-text h1 span{
    font-size: 50px;
    font-weight: 500;
}
.left-text a img{
    width: 60px;
    margin-right: 20px;
}
.left-text a{
    /* display: flex; */
    align-items: center;
    text-decoration: none;
    margin: 30px 0 30px;
    display: inline-block;
    background: transparent;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    padding: 15px 50px;
    border-radius: 30px;
    border: 4px solid #fff;  /*922125*/
}
.left-text a:hover{
    background: #fff;
    color: #333
}
#mainbox{
    font-size: 35px;
}

<html>
<head>
    <meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
    <title>Korps Commandotroepen</title>
    <link rel="stylesheet" href="index2.css">
</head>
<body>
    
    <div >
        <div >
            <div id="mainbox" onclick="openFunction()">&#9776;</div>
            <div >
                <ul>
                    <li><a href="#"> <img src="images/minis1.png" ></a></li>  
                </ul>
            </div>
            <div >
                <h1><span ></span></h1>
                <a href="#">Ontdek meer</a>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        var typed = new Typed(".auto-type", {
            strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
            typeSpeed: 150,
            backSpeed: 150,
            loop: false,
        });
    </script>
</body>
</html>