我的文字如何垂直对齐，而不是水平对齐？

Question

我的网站应该是什么样子

我的网站长什么样

HTML

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


    <head>
        <link rel = "stylesheet" type = "text/css" href="Vendors/CSS/normalize.css">
        <link rel = "stylesheet" type = "text/css" href = "Resources/CSS/style.css">
        <link rel = "stylesheet" type = "text/css" href = "Vendors/CSS/grid.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">

        <title>Omnifoods</title>

    </head>
        <body>
          <header>
            <div class = "hero-text-box">
                <h1> Goodbye junk food. <br> Hello super healthy meals.<br></h1> 
                <a href="#" class="btn btn-full">I'm Hungry!</a>
                <a href="#" class="btn btn-ghost">Show me more!</a>  


            </div>
            <nav>
                <div class = "row" >
                <img src = "Resources/CSS/Images/logo-white.png" alt = "Ominifood Logo" class = "logo">
                <ul class = "main-nav">

                    <li> <a href="#">Food delivery</a> </li>
                    <li> <a href="#">How it works</a> </li>
                    <li> <a href="#">Our cities</a> </li>
                    <li> <a href="#">Sign up</a> </li>

                </ul>

                </div>   

            </nav>

         </header>

            <section class = "section-features"> 
                <div class = "row">
                    <h2>Get food fast &mdash; not fast food.</h2>
                    <p class="long-copy">Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!</p>
                </div>

                    <div class = "row">
                    <div class = "col span 1-of-4">
                        <h3>Up to 365 days/year</h3>

                        <p>Never cook again! We really mean that. Our subscription
 plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>

                    </div>

                   <div class = "col span 1-of-4">
                        <h3>Ready in 20 minutes</h3>

                        <p>You're only twenty minutes away from 
                your delicious and super healthy meals delivered right to your home. 
              We work with the best chefs in each town to ensure that you're 100% happy.</p>

                    </div>

                     <div class = "col span 1-of-4">
                        <h3>100% organic</h3>

                        <p>All our vegetables are fresh, organic and local.
                   Animals are raised without added hormones or antibiotics. 
                  Good for your health, the environment, and it also tastes better!</p>

                    </div>

                     <div class = "col span 1-of-4">
                        <h3>Order anything</h3>

                        <p>All our vegetables are fresh, organic and local. Animals are raised without 
                        added hormones or antibiotics. 
                       Good for your health, the environment, and it also tastes better!</p>

                    </div>

                </div> 


            </section>

        </body>

    </html>






 **CSS**



  /* orange color ->  #e67e22 */ 

    /*-------------------------------------- */
                /*BASIC SETUP*/
    /*-------------------------------------- */

    * {margin: 0;
    padding: 0;
    box-sizing: border-box;}

    html{background-color: #fff; 
    color:#484a4b;
    font-family: 'Lato', 'Arial' , sans-serif; 
    font-size:20px;
    font-weight: 300; 
    text-rendering: optimizeLegibility; 
    }


    /*-------------------------------------- */
                /* REUSEABLE COMPONENTS */
    /*-------------------------------------- */

    .row {   
    max-width:1140px;
    margin: 0 auto;}

    /*-------------------------------------- */
                /* HEADINGS */
    /*-------------------------------------- */

    h1{margin-top:0;
    margin-bottom: 20px; 
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
    }

    /*-------------------------------------- */
                /* BUTTONS */
    /*-------------------------------------- */

    .btn:link,
    .btn:visited
    {display:inline-block;
    font-weight: 300;
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 200px;
    color: #fff;
    transition: background-color 0.2s, border 0.2s, color 0.2s}

    .btn-full:link,
    .btn-full:visited
    {background-color: #e67e22;
    border: 1px, solid, #e67e22;
    color:#fff;
    margin-right: 15px;}


    .btn-ghost:link,
    .btn-ghost:visited
    {border:1px solid #e67e22; 
    color: #e67e22;}

    .btn:hover,
    .btn:active { background-color: #cf6d17;}

    .btn-full:active,
    .btn-full:hover
    {
    border: 1px, solid, #e67e22;}


    .btn-ghost:active,
    .btn-ghost:hover
    {border:1px, solid, #cf6d17; 
    color:white;}

    /*-------------------------------------- */
                /* MAIN HEADER */
    /*-------------------------------------- */

    header { 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 
     0.7)),url(Images/hero.jpg);
    background-size: cover;
    background-position: center;
    height:100vh;
    }



    .hero-text-box {
    position:absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    }

    .logo {
    height: 100px;
    width: auto;
    float: left;
    margin-top:20px;}

    .main-nav{

        float: right;
        list-style: none;

    }

    .main-nav li {display: inline-block; 
    margin-left: 40px;
    margin-top: 55px;

    }

    .main-nav li a:link, 
    .main-nav li a:visited
    {color:white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border: 2px;
    }

    .main-nav li a:hover, 
    .main-nav li a:active 
    {border-bottom:  2px solid #e67e22; 
    padding: 8px 0px;
    }

我已经尝试过将文本作为内联块元素，但无济于事。