<div class="contain">
    <div class="item example-8">
      <footer>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#" class="active">Contact</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Home</a></li>
        </ul>
      </footer>
    </div>
  </div>

  <div class="contain">
    <div class="item example-8">
      <footer style="background: #5aaf4c;">
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#" class="active">Contact</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Articles</a></li>
          <li><a href="#">Home</a></li>
        </ul>
      </footer>
    </div>
  </div>

/*...... Demo Styles ........*/
.example-8 {
	footer {
		background: palevioletred;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	li {
		display: inline-block;
	}

	a {
		display: block;
		padding: 1em 2em;
		color: #fff;
		text-decoration: none;

		&:hover {
			background: rgba(#000, 0.25);
		}

		&.active {
			background: rgba(#000, 0.25);
		}
	}
}

/*...... 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;
}