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;
}