<!DOCTYPE html><!-- <>QUESTION 1<> -->
<html>
<head>
<meta charset="utf-8">
<title>SO39418788</title>
<style>
/*[OPTIONAL]
| The next 3 rulesets are a reset that you
| can apply to almost any webpage.
*/
html {
width: 100%;
height: 100%;
box-sizing: border-box;
font: 400 16px/1.428 Arial, Helvetica, sans-serif;
}
body {
width: 100%;
height: 100%;
background: #EEE8AA;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 none transparent;
}
/*[FLEX CONTAINER]
| <>QUESTIONS 2, 3, and 4<>
| Using a container that encompasses all tags
| will give you more control. Having trouble
| with 3 tags? 50 tags? Wrap a container
| around them and you'll have influence
| over them as a group. This will save you
| from writing extra repetitive code
| because the descendants of the container
| will inherit the styles.
*/
.top {
display: flex;
/*
| flex-flow is not 100% with all browsers.
| It's safer to use flex-direction
*/
flex-direction: row;
line-height: 25px;
text-align: center;
/* <>QUESTION 2<> */
width: 100%;
max-width: 875px;
justify-content: space-between;
position: relative;
/* <>QUESTION 2<>
| As long as the element is a block this
| style will center it horizontally.
*/
margin: 0 auto;
}
.center {
background: #BDB76B;
flex: 2 0 auto;
order: 2;
font-size: 1.4rem;
}
.left {
margin: 5px;
background: #BDB76B;
order: 1;
position: absolute;
left: 0;
width: 150px;
}
.right {
margin: 5px;
background: #BDB76B;
order: 3;
position: absolute;
right: 0;
width: 150px;
}
a,
a:link,
a:visited {
color: rgba(122, 2, 14, .8);
/* <>QUESTION 5<>
| Apply the style directly on <a>
*/
text-decoration: none;
}
a:hover,
a:active {
background: #000;
color: #BDB76B;
}
</style>
</head>
<body>
<header class='top'>
<button class='left'>
<a href="http://www.msn.com/">Home</a>
</button>
<h1 class='center'>Main Menu</h1>
<button class='right'>
<a href="#" onclick="history.go(-1)">Back</a>
</button>
</header>
</body>
</html>
