JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <aside class="iAmSam columnDiv">aside</aside>
  <div class="soundLogoContainer columnDiv">div</div>
  <div class="homeSkillContainer">div</div>
</main>

CSS

body {
	width: 100%;
}

header {
	width:100%;
}

header h1 {
	font-family: josefin-sans, sans-serif;
	font-weight: 300;
	font-size: 55px;
	width: 165px;
	position: relative;
	float: left;
	left: 25px;
}

.BGDR {
	letter-spacing: 4px;
	line-height: 0px;
	height: 0px;
}

.creative {
	position: relative;
	top: -25px;
}

/* CSS Document */



/*mobile device*/
@media (max-width:414px){
body header {
	height: 116px;
	background-color: pink;
}

body main {
    background-color: skyblue;
}

.columnDiv {
	display: inline-block;
    width: 50%;
    height: 200px;
}

.soundLogoContainer {
	background-color: grey;
}


.iAmSam {
    background-color: yellow;
}
.homeSkillContainer {
	position: relative;
	top: 202px;
	width: 100%;
	height: 200px;
	background-color: orange;
}
.imgtextIMAKE {
	position: relative;
	top: 0px;
	margin: 0 auto;
	width: 96%;
	height: 90%;
}
.iAmSam.columnDiv .myNameIsSam {
	position: relative;
	top: 10%;
	margin: 0 auto;
	height: 86%;
}

}



/*Tablet view*/
@media (min-width:415px) and (max-width:949px){

}



/*Desktop view*/
@media (min-width: 950px){
}


/*For the responsive menu*/

@media (max-width: 719px){
	
.responsMenu {
	width: 40px;
	height: 40px;
	position: relative;
	float: right;
	right: 50px;
	top: 58px;
}



}

@media (min-width: 719px){
	.responsMenu {
		display:none;
	}
}