I've been racking my brain trying to figure out what obvious mistake I made on this basic website. I need the image below the header to be responsive, but no matter what I try, it just won't cooperate.
If someone could help me out, I would really appreciate it. Thanks in advance!
Here is the HTML code:
<html>
<body>
<header>
<div class="container">
<div class="brand">
<img class="brandImg" src="https://photos-1.dropbox.com/t/2/AACo_XuN80WW6m3RltLuUDD-Koivyw205OCV55h43hevVQ/12/184045382/png/32x32/1/_/1/2/network.png/EKPi4YsBGMICIAIoAg/u6N5dEYvNDRNysVhT6Arx-eKOa64tOkilzRp8K3e93Y?preserve_transparency=1&size=1600x1200&size_mode=3" alt="Brand Image">
<h3 class="mainTitle">Network Solutions</h3>
</div>
<nav>
<ul class="navBar">
<li><a href="#">About |</a></li>
<li><a href="#">Portfolio |</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="heroImg">
<div class="container">
</div>
</div>
</section>
</body>
</html>
And here is the CSS code:
/* MAIN STYLES */
.container {
max-width: 60%;
margin: 0 auto;
}
/* HEADER */
header {
height: 100px;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.brand {
float: left;
display: inline;
margin-top: 20px;
}
.brandImg {
height: 4em;
width: 4em;
float: left;
margin-bottom: 5px;
}
.mainTitle {
font-family: 'IBM Plex Mono', monospace;
line-height: 1.2em;
position: relative;
left:8px;
top: -5px;
}
/* MAIN NAVIGATION */
ul {
float: right;
}
li {
margin-top: 15px;
float: left;
display: inline;
font-size: 40px;
padding-left: 15px;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
color: gray;
}
/* HERO SECTION */
#showcase {
width: 100%;
height: 100%;
}
.heroImg {
background-image: url("https://photos-1.dropbox.com/t/2/AADgiVKPX---q_yzz3R6QXjMuvUF9x1suRGMjLMV8QkZVQ/12/184045382/jpeg/32x32/1/_/1/2/hero.jpeg/EKPi4YsBGMICIAIoAg/-UTK8zUqda_wA3F-VrZAdIZvo84OHHGWCbLEcdCi1K8?size=1600x1200&size_mode=3");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}