Q:

Logo (float: left) & list (float: right) is not visible

In HTML5 & CSS3, The logo needs to float to the left top corner & the list of items/menu need to float to the right top corner. 
In the output here, the logo is not invisible for some reason. But "alt" was mentioned, "in place of the logo."
Here is the output is received from my side. I've marked it with white color on top of the webpage:

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

html {
    background-color: #fff;
    color: #555555;
    font-family: 'Lato', 'Arial', sans-serif;
    color: #555555;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
/*---------------------------------------------------------*/
/*----------------REUSABLE COMPONENTS----------------------*/
/*---------------------------------------------------------*/
.row {
    max-width: 110px;
    margin: 0 auto;
}
/*-------------------------HEADINGS------------------------*/
h1 {
    margin: 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;
    color: #fff;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    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 {
    color: #e67e22;
    border: 1px solid #e67e22;
}

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

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

.btn-ghost:hover,
.btn-ghost:active {
    color: #fff;
    border: 1px solid #cf6d17;
}
/*------------------------------------------------------------------------*/
/*----------------------------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(-40%,-50%);
}


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

.main-nav {
    float: right;
    list-style: none;
    margin: 55px;
}

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

.main-nav li a:link, 
.main-nav li a:visited {
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

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

My HTML File:
<!DOCTYPE html>

<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="Vendors/CSS/normalize.css">
        <link rel="stylesheet" type="text/css" href="Vendors/CSS/grid.css">
        <link rel="stylesheet" type="text/css" href="Resources/CSS/Style.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i" type="text/css" rel="stylesheet">
        <title>Shyam Restaurant</title>
    </head>

    <body>
        <header>
            <nav>
                <div class="row">
                    <img src="Resources/Images/logo-white.png" alt="Shyam Restaurant 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>
            <div class="hero-text-box">
                <h1>Goodbye junk food. <br>Hello super healthy meals</h1>
                <a class="btn btn-full" href="#">I'm hungry</a>
                <a class="btn btn-ghost" href="#">show me more</a>
            </div>
        </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>
                        We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
                    </p>
                </div>
            </div>
        </section>
    </body>
</html>

I can't find out why the logo is visible.

A:

Your elements are floating correctly, however, the parent has a max width of 110px provided by the class row so, basically, they have no much room to position

