I sincerely hope this is the right place to ask. Can someone tell me if my code is okay so far? I've read quite some resources online for responsive webdesign but it seems like everyone's opinion on best practices is different.The page I'm working on is this.It's a very simple page with very little content. Right now it works quite well on smaller devices but I want to be sure my approach is correct.In particular, I'm not sure whether my use of the units is correct.html, body { height: 100% }body { margin: 0; padding: 0; font-family: 'Lato', sans-serif; background-color: #eee; overflow: hidden;}/* Content */.container {  position: relative;  height: 80%;}img[alt=Pikachu] {  width: 198px;  height: 198px;  border: 1px solid #000;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);}/* Footer */footer {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  border-top: 1px solid #cbcbcb;  height: 20%;  max-height: 100px;  min-height: 60px;  background-color: #eee;  text-align: center;}footer:after {  content: '';  border-top: 1px solid #fff;  position: absolute;  top: 0;  left: 0;  width: 100%;}footer > div {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  white-space: nowrap;}    /* Footer Images */a > img {  width: 45px;  vertical-align: middle;  margin-right: 15px;}  img[alt=Twitch] {    margin-right: 0;  }/* Typography */h1 {  line-height: 48px;  margin: 24px 0;  color: #fff;  text-shadow: hsl(15, 84%, 10%) 1px 1px, hsl(15, 84%, 10%) 2px 2px, hsl(15,             84%, 10%) 3px 3px, hsl(15, 84%, 10%) 4px 4px;    text-transform: uppercase;    text-align: center;    white-space: nowrap;  }    h1::selection {      color: hsl(15, 84%, 10%);      background-color: #fff;      text-shadow: none;    }  p {    line-height: 24px;    margin: 24px 0;  }
Simple responsive page
css