Would you change the HTML - relating to my “boxes” - in the code below?
<!doctype html>
<html lang="en">
<head>
<title>Our Services</title>
<!-- HTML Metadata -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Stylesheets -->
<style type="text/css">
/* Basic CSS Reset */
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd, br,
table, tr, td, th, p, img{
margin: 0;
padding: 0;
}
header, footer, nav, section, article, aside{
display: block;
}
body{
font-family: Helvetica, Arial, Sans-Serif;
font-weight: normal;
font-size: 0.9em;
line-height: 1.4;
color: #000;
background: #FFF;
}
/* Services Container */
.outermost{
width: 52em;
margin: 0 auto;
}
/* Services Subcontainer */
/* Creates empty subcontainer with a top padding (height)
of 20% of .outermost container */
.outerwrap{
/*
position: relative; /* Make positioned element. *
padding-top: 20%;
*/
}
/* Services Subcontainer2 */
/* Creates empty subcontainer stretched to fit .outerwrap container. */
.wrapper{
/*
position: absolute; /* Make positioned element.
top: 0;
left: 0;
right: 0;
bottom: 0;
*/
}
/* Services */
nav{
display: table;
table-layout: fixed; /* Equal-width Boxes. */
border-collapse: collapse;
width: 100%; /* 52em */
height: 100%; /* 20% of 52em */
background-color: #bdf;
/* overflow: hidden; /**/
}
a{
display: table-cell;
padding: 0.5em 0.8em 1em 0.8em; /**/
color: inherit;
line-height: 1.2;
text-decoration: none;
text-align: left;
vertical-align: top;
border: 1px solid #854;
}
a:hover{
color: blue;
text-decoration: none;
}
span{
display: table-cell;
width: 1%; /* use available space */
height: 2.4em;
text-align: center;
vertical-align: bottom;
font-weight: bold;
font-size: 1.2em;
}
@media screen and (max-width:53em){
.outermost{
width: auto;
}
.outerwrap,
.wrapper{
position: static;
}
.outerwrap{
padding-top: 0;
}
nav,
a,
span{
display: block;
width: auto;
height: auto;
text-align: left;
}
a+a{
border-top: 0;
}
}
</style>
</head>
<body>
<div class="outermost">
<div class="outerwrap">
<div class="wrapper">
<nav>
<a href="#go1"><span>Responsive Design</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go2"><span>Mobile</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go3"><span>SEO</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go4"><span>Programming</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
<a href="#go5"><span>Business Development</span>
Lorem imsum dolor sit amet, consectetur adipiscing elit. Donec lictus nulla, scelerisque id augue in, maximus mollis erat.
</a>
</nav>
</div>
</div>
</div>
</body>
</html>