Please i need help with this code https://codepen.io/declareola/pen/XWWOyyK
This is the html code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<h1>OUR MENU</h1>
<div class="row">
<div class="column1"><span class="column4">CHICKEN</span> Kirk this too will increase his shoes God give us Christian homes! Homes where the Bible is loved and taught, Homes where the Master’s will is sought, Homes crowned with beauty Your love has wrought; God give
us Christian homes; God give us Christian homes! God give us Christian homes! Homes where the father is true and strong, Homes that are free from the blight of wrong, Homes that are joyous with love and song; God give us Christian homes; God
give us Christian homes! God give us Christian homes! will audio policies school but thought office thing this offer still it's still think Rashi idea will</div>
<div class="column2"><span class="column4">SUSHI</span>Colleen Kirk this too will increase his shoes God give us Christian homes! Homes where the Bible is loved and taught, Homes where the Master’s will is sought, Homes crowned with beauty Your love has wrought; God
give us Christian homes; God give us Christian homes! God give us Christian homes! Homes where the father is true and strong, Homes that are free from the blight of wrong, Homes that are joyous with love and song; God give us Christian homes;
God give us Christian homes! God give us Christian homes! will audio policies school but thought office thing this offer still it's still think Rashi idea will</div>
<div class="column3"><span class="column4">BEEF</span>Colleen Kirk this too will increase his shoes God give us Christian homes! Homes where the Bible is loved and taught, Homes where the Master’s will is sought, Homes crowned with beauty Your love has wrought; God
give us Christian homes; God give us Christian homes! God give us Christian homes! Homes where the father is true and strong, Homes that are free from the blight of wrong, Homes that are joyous with love and song; God give us Christian homes;
God give us Christian homes! God give us Christian homes! will audio policies school but thought office thing this offer still it's still think Rashi idea will</div>
</div>
</body>
</html>
And this is the css code
*{
box-sizing: border-box;
margin: auto;
padding: 0%;
}
h1{
margin: 10px;
text-align: center;
}
body{
background-color: aqua;
font-family: 'EB Garamond', serif;
}
.column1{
position: relative;
overflow: auto;
border: 1px solid black;
margin-left:5px;
margin-bottom: 20px;
border-width:2px;
padding:50px 2px 0px 5px;
text-align:justify;
background-color: brown;
}
.column2{
position: relative;
overflow: auto;
border: 1px solid black;
margin-left:5px;
margin-bottom: 20px;
border-width:2px;
padding:50px 2px 0px 5px;
text-align:justify;
background-color: darkslateblue;
}
.column3{
position: relative;
overflow: auto;
border: 1px solid black;
margin-left:5px;
margin-bottom: 20px;
border-width:2px;
padding:50px 2px 0px 5px;
text-align:justify;
background-color: magenta;
}
.column4{
position: absolute;
border: 2px #089c2d;
top:-1px;
right:-1px;
width:120px;
height:40px;
text-align: center;
padding: 10px;
background-color: chartreuse;
}
.row:after{
content: "";
display: table;
float: left;
}
@media(min-width:1200px){
.column1{
float: left;
width: 33.3%;
}
.column2{
float: left;
width: 33.3%;
}
.column3{
float: left;
width: 33.3%;
}
}
@media(min-width:992px) and (max-width:1199px){
.column1{float:left; width:50%;}
.column2{float:left; width:50%;}
.column3{float:left; width:100%;}
}
@media(min-width:768px) and (max-width:991){
.column1{float:left; width:100%;}
.column2{float:left; width:100%;}
.column3{float:left; width:100%;}
}
the @media isn't responding as expected. The first two columns are not fitting into the window when the at 1200px Same problem is experienced when the window has maximum width of 991px