header {
    /* background color */
    background: #222222;
    /* text color */
    color: #ffffff;
    /*padding top and bottom of 20px - padding left and right of 30px*/
    padding: 20px 30px;
}

/* logo nest inside header */

header #page-header {
    color: white;
    text-decoration: none; /* https://www.w3schools.com/cssref/pr_text_text-decoration.asp */
    width: 49%; 
    display: inline-block
}

header img {
    width: 50px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

header h2 {
    font-size: 16px;
}

/* MAIN NAVIGATION */

header #main-navigation {
    width: 99%;
    display: inline-block;
    text-align: center;
}

header #main-navigation ul {
    /* The list-style CSS property is a shorthand for setting the individual values that define how a list is displayed: list-style-type, list-style-image, and list-style-position. */
        /* none - No list style is used. */
    list-style: none;
    padding: 0;
}

header #main-navigation ul li {
    /* The display CSS property defines the display type of an element */
    display: inline-block; 
}

header #main-navigation ul li a {
    color: white;
    text-decoration: none; /* https://www.w3schools.com/cssref/pr_text_text-decoration.asp */
    padding: 10px 15px;
}

header #main-navigation ul li a:hover {
    background: #444;
    border-radius: 3px;
    /* The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/transition */
    transition: 0.3s ease all;
}