Template:UCopenhagen/Header2

<style> .header-container {

display: flex;
flex-direction: column;
border-bottom: 1px solid #F2F2F2;
padding: 2.3em 0;

} .logo {

margin-left: 5%;

} .logo img {

display: block;

} nav {

margin: 1.5em 0 0 5%;

} header ul li {

display: inline-block;
padding: 0 1.4em 0 0;
font-size: 0.9em;

} header ul li a {

text-decoration: none;
color: #7D7C7D;

} li a.active {

color: #000000;
border-bottom: 2px solid #000000;
font-weight: 300;

} li a:hover {

color: #B6B6B6;

}

@media screen and (min-width : 600px) {

.header-container {
  flex-direction: row;
  justify-content: space-between;
}
.logo {
  margin-left: 2.3em;
}
nav {
  align-self: center;
  margin: 0 0.8em 0 0;
}

} </style>

<header class=”header-container”> <meta name=”viewport” content=”width=device-width”>

  <img src=”images/logo.png” width=”180"></a>

<nav>

• <a title=”Home”>Home</a>
• <a class=”active” title=”Watches”>Watches</a>
• <a title=”Our story”>Our Story</a>
• <a title=”Contact”>Contact</a>

</nav>

</header>