Background color not showing up at all

Background color not showing up at all
0
#1

Cant make my background color to show at all. Im making two pages for my site, one is index.html and other is view-all.html. Any help would be awesome. My site is in a folder with index.html and style.css and have other two folders for images and second is a folder for other page of site. Check id editorial in CSS and HTML.
Here’s my html:

<!doctype html>
<html>
<head>
    <title>View All</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel=stylesheet type="text/css" href="../style.css">
</head>
    <body>
        <div id="wrapper">
            
            <nav>
                <h1 id="logo"><a id="logostyle" href="#">ISMAR BEGIC</a></h1>
                
                <div id="navigation">
                    <a class="navlink" href="#">Home</a>
                    <a class="navlink" href="#">About</a>
                    <a class="navlink" href="#">Blog</a>
                    <a class="navlink" href="#">Portfolio</a>
                    <a href="#">Contact</a>
                </div>
                
            </nav>
        
            <main>
                
                    <div id="editorial"></div>
                    <div id="food-and-serve"></div>
                    <div id="baked-goods"></div>
                
            </main>
            
            <footer>
                <div id="icons">
                    <i class="fab fa-facebook-f"></i>
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-pinterest-p"></i>
                </div>
                <p>By Art of Food.</p>
            </footer>
        </div>
    </body>
</html>
body {
    font-family: sans-serif;
    background-color: azure;
    margin-right: 50px;
    margin-left: 50px;
}

nav {
    height: 55px;
}

nav h1#logo a {
    text-decoration: none; 
    float: left;
    /*margin-left: 50px;*/
    color: black;
    font-weight: normal;
    font-family: 'Playfair Display', serif;
}

nav #navigation {
    list-style: none;
    float: right;
    margin-top: 10px;
}

nav #navigation a {
    text-decoration: none;
    /*padding-left: 80px;*/
    color: black;
    text-align: center;
}

nav #navigation a.navlink {
    margin-right: 50px;
}

nav #navigation a:hover {
    color: darkgray;
}

/*nav #navigation a:visited {
    color: darkgray;
}*/

#main {
    background-image: url("Images/food.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /*transform: rotate(360deg);*/
}

main #content1 {
    text-align: center;
    padding: 400px;
    color: white;
    font-family: 'Playfair Display', serif;
}

main #content1 h2 {
    font-size: 75px;
    font-weight: normal;
    margin-bottom: 20px;
    
}

main #content1 h3 {
    font-weight: normal;
    font-size: 32px;
    margin-bottom: 40px;
}


main #content1 button#button-view-more {
    background-color: transparent;
    border: 2px solid white;
    width: 180px;
    height: 45px;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

main #content1 button#button-view-more:hover {
    color: darkgray;
    border: 2px solid darkgray;
}

footer {
    padding: 50px;
}

#icons {
    text-align: center;
}

.fab {
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

footer p {
    text-align: center;
}



 #editoral {
    background-color: green;
    width: 300px;
     height: 200px;
}


#2

Check the spelling, your html and css id do not match. You’re missing a letter :wink: