Need help with making the webpage header responsive (on mobile and other devices): HTML CODE:

HOME

About

Skills

My Blog

My Notes

CSS CODE:

header { overflow: hidden; line-height: 2em; height: 80px; background: #000000; padding: 0 5%; margin-top: -10px; position: relative;

}

a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; }

a:hover:after { width: 100%; left: 0; }

#header a { color: #FFFFFF; text-decoration: none; display: inline-block; }

span { width:50%; display:inline-block; }

span.align-right { text-align:right; }

main { width: 90vw; margin: 0 auto; padding: 30px 20px; }