HTML/CSS Header Formatting Issue - html

Question

I'm working a project which consists of creating a web application. Currently, I'm focusing on the general design and layout of the website. First of all, I want a horizontal dark grey header on the top. Below that, I want two columns, one with a navigation bar, and one with the content.
Actual result
Desired result
Below is my code and I'm not sure what's causing the issue of the dark header on top not showing up.
Full CSS file: https://pastebin.com/kpUHV71Z
<section class="management">
<div class="header-div">
<img src="Golf.png" class="management-logo" height="50" width="50">
<h1 class="impact" id="management-header">Management Dashboard</h1>
</div>
<div class="left left-nav">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="right">
<h3>Staff</h3>
</div>
<div class="clear"></div>
</section>

Answer 1

You need to assign a display and a width to your header
.header-div {
background-color: #555555;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: auto;
width: 100%;
display: inline-block;
}
This will make the header behave as a block and let you navigation adjust
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
body {
text-align: center;
background-image: url("background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
font-family: verdana;
}
.selection-menu {
margin-top: 50px;
}
#special-button {
margin-top: 100px;
margin-left: 200px;
}
#special-button2 {
margin-top: 100px;
margin-left: 400px;
}
#header {
margin-top: 10px;
font-weight: bold;
font-size: 60px;
color: white;
}
#author {
font-weight: normal;
font-size: 25px;
margin-top: -40px;
color: white;
padding-bottom: 20px;
}
.club-selection {
font-weight: bold;
margin-top: 20px;
font-size: 50px;
}
.input-header {
font-weight: bold;
margin-top: 20px;
font-size: 50px;
}
.impact {
font-family: Montserrat;
}
.index-section {
background-color: rgb(242,242,242);
border-radius: 5px;
width: 50%;
margin: auto;
padding-bottom: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 50px;
}
table {
border-collapse: collapse;
margin: auto;
margin-top: 10px;
}
table td, table th {
border: 1px solid lightgrey;
padding: 2px;
}
.management {
background-color: rgb(242,242,242);
border-radius: 5px;
width: 90%;
margin: auto;
padding-bottom: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 50px;
}
h3 {
font-size: 40px;
font-family: Montserrat;
margin-bottom: 10px;
}
.separate {
width: 95%;
margin: auto;
margin-top: 20px;
margin-bottom: -30px;
}
.buttongroup {
display: inline;
}
input {
display: inline;
}
button {
background-color: #555555;
border: none;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
}
button:hover {
background-color: lightgrey;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
input {
border: none;
height: 3%;
}
#appdescription {
margin-top: 40px;
margin-bottom: -10px;
}
.inline-alignment {
display: inline;
margin-bottom: 20px;
}
img {
margin-left: 20px;
}
.header-div {
background-color: #555555;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: auto;
width: 100%;
display: inline-block;
}
.left {
width: 25%;
float: left;
}
.right {
margin-left: 25%;
}
.clear {
clear: both;
}
.management-logo {
float: left;
clear: right;
margin-right: 20px;
}
#management-header {
margin-top: 10px;
font-weight: bold;
font-size: 30px;
color: white;
float: left;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: grey;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
.left-nav {
background-color: grey;
}
<section class="management">
<div class="header-div">
<img src="Golf.png" class="management-logo" height="50" width="50">
<h1 class="impact" id="management-header">Management Dashboard</h1>
</div>
<div class="left left-nav">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="right">
<h3>Staff</h3>
</div>
<div class="clear"></div>
</section>

Answer 2

You have to left-floated elements (logo and title) and no clears on your header-div, so it effectively has zero height.
So adjust with a clearfix, or use inline-block or flexbox instead of floats.
.management-logo {
margin-right: 20px;
display:inline-block;
}
#management-header {
margin-top: 10px;
font-weight: bold;
font-size: 30px;
color: white;
margin: 0;
display:inline-block;
}
https://jsfiddle.net/49m5395n/13/

Answer 3

I really love display: flex; and thats why I recomend it for everyone. It isn't too much heavy and saves a LOT of styling. I sugest you to study it.
Anyway, here is my contribution:
body {
text-align: center;
background-image: url("background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
font-family: verdana;
}
.header {
display: flex;
background: #555;
}
.canvas {
display: flex;
}
.navigation {
width: 25%;
}
.content {
width: 75%;
}
/* YOUR CODE BELOW*/
.selection-menu {
margin-top: 50px;
}
#special-button {
margin-top: 100px;
margin-left: 200px;
}
#special-button2 {
margin-top: 100px;
margin-left: 400px;
}
#header {
margin-top: 10px;
font-weight: bold;
font-size: 60px;
color: white;
}
#author {
font-weight: normal;
font-size: 25px;
margin-top: -40px;
color: white;
padding-bottom: 20px;
}
.club-selection {
font-weight: bold;
margin-top: 20px;
font-size: 50px;
}
.input-header {
font-weight: bold;
margin-top: 20px;
font-size: 50px;
}
.impact {
font-family: Montserrat;
}
.index-section {
background-color: rgb(242, 242, 242);
border-radius: 5px;
width: 50%;
margin: auto;
padding-bottom: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 50px;
}
table {
border-collapse: collapse;
margin: auto;
margin-top: 10px;
}
table td,
table th {
border: 1px solid lightgrey;
padding: 2px;
}
h3 {
font-size: 40px;
font-family: Montserrat;
margin-bottom: 10px;
}
.separate {
width: 95%;
margin: auto;
margin-top: 20px;
margin-bottom: -30px;
}
.buttongroup {
display: inline;
}
input {
display: inline;
}
button {
background-color: #555555;
border: none;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
}
button:hover {
background-color: lightgrey;
color: black;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
input {
border: none;
height: 3%;
}
#appdescription {
margin-top: 40px;
margin-bottom: -10px;
}
.inline-alignment {
display: inline;
margin-bottom: 20px;
}
img {
margin-left: 20px;
}
.header-div {
background-color: #555555;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: auto;
}
.left {
width: 25%;
float: left;
}
.right {
margin-left: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: grey;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
.left-nav {
background-color: grey;
}
<header class="header">
<img src="golf.png" height="50" width="50">
<h1 class="impact">Management Dashboard</h1>
</header>
<div class="canvas">
<div class="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="content">
<h3>Content</h3>
</div>
</div>