<div class="contain">
    <div class="item example-7">
      <header>
        <div>
          <h1>
            <a href="#">iShadeed</a>
          </h1>
        </div>
        <div>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Home</a></li>
          </ul>
        </div>
      </header>
    </div>
  </div>

  <div class="contain">
    <div class="item example-7">
      <header style="background: #00bcd4;">
        <div>
          <h1>
            <a href="#">iShadeed</a>
          </h1>
        </div>
        <div>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Home</a></li>
          </ul>
        </div>
      </header>
    </div>
  </div>

/*...... Demo Styles ........*/
.example-7 {
	header {
		color: #fff;
		background: #5aaf4c;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	h1 {
		margin: 0;
		font-size: 1.5rem;
	}

	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: flex;

		a {
			display: block;
			padding: 1em;
		}
	}

	div {
		padding: 1em;
	}

	div:first-child {
		border-bottom: 2px solid rgba(#fff, 0.25);
	}

	div:last-child {
		background: rgba(#000, 0.25);
		padding: 0;
	}
}

/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}