The expected result is for the box to scale down and fit into the center of the page without going off the side of the page. However, the actual result is that it goes off the side of the page when I scale down to some sizes. I don't really want to add in another screen size because I feel that the ones I have already should be adequate. Can anyone help with a solution for this issue, thanks.
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width,
initial-scale=1.0">
<title>Student Hacks</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="img/pencil.png">
</head>
<body class="grid">
<header>
<img class="logo" href="index.html" src="img/student-hacks-logo.png" alt="Logo">
</header>
<div class="menu" id="menu-toggle"></div>
<nav id="menu-nav">
<a class="home" href="index.html">HOME</a>
<a class="money" href="money.html">MONEY</a>
<a class="study" href="study.html">STUDY</a>
<a class="faqs" href="faqs.html">FAQs</a>
</nav>
<main>
<div class="container">
<img src="img/moneysaving.jpg" alt="image of money">
<div class="text">Money Tips & Tricks</div>
</div>
<div class="animation"></div>
<h2 class="heading">Ways To Save Money</h2>
<hr class="index-hr-1">
<h3>Evening Shopping!</h3>
<p class="rcorners2">Shop in the evenings, this way
there will be a lot more discounted items. There are
sometimes dedicated shopping isles for discounted
items.</p>
<h3>Student Discounts!</h3>
<p class="rcorners2">UniDays and NUS are great ways
to save money. They provide student discount cards
that are compatible with many stores and restaurants.</p>
<h3>Travel Cards!</h3>
<p class="rcorners2">Purchase a 16-25 railcard to travel for
discounted prices. If you have a 123 Student Bank Account
with santander, you get the card for free!</p>
<h3>Budget, Budget, Budget!</h3>
<p class="rcorners2">When you receive your student loan,
start budgeting it out on essentials. Budget food, books,
rent,bills, etc. This lets you know where all your money
is going.</p>
</main>
<footer class="footer">
<p class="footer-writing">Student Hacks© 2018</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
css:
body {
margin: 0;
padding: 0;
width: 100%;
font-family: "Courier New", Courier,
monospace;
font-weight: normal;
font-size: 1rem;
color: black;
}
html {
margin: 0;
padding: 0;
width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"content"
"footer";
}
header {
grid-area: header;
background: #e5e5e5;
height: 100px;
}
.logo {
width: 350px;
height: 90px;
margin: auto;
display: block;
}
nav {
grid-area: menu;
justify-content: center;
flex-direction: row;
}
nav a {
padding: 0;
color: black;
background: #bfbfbf;
text-decoration: none;
transition: all 0.5s;
width: 100%;
text-align: center;
float: right;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.home {
height: 3vh;
}
.money {
height: 3vh;
}
.study {
height: 3vh;
}
.faqs {
height: 3vh;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
background-color: #e5e5e5;
}
h3 {
text-align: center;
}
.container img {
width: 100%;
height: 200px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
footer {
grid-area: footer;
background-color: #CDCDCD;
position: sticky;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
.footer-writing {
text-align: center;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
text-align: center;
}
.heading {
text-align: center;
font-size: 3rem;
}
.faq-hr-1 {
/* border: dashed 1.5px;
width: 35%;
margin-bottom: 75px;
margin-top: 35px; */
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
.index-hr-1 {
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 12px 12px -10px #8c8b8b inset;
}
.about-us-text {
text-align: center;
font-size: 1.2rem;
margin-left: 25px;
margin-right: 25px;
}
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.wiki-label {
text-align: center;
font-size: 1em;
margin-left: 10%;
}
.submit-btn {
margin-left: 2%;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
margin-left: 20%;
margin-right: 40%;
padding: 20px;
width: 200px;
height: 115px;
font-size: 0.9rem;
text-align: center;
}
@media screen and (min-width: 500px) {
/* applies to screens wider than 499px */
body {
background: #e5e5e5;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
nav {
display: flex;
flex-direction: row;
line-height: 1.5em;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.logo {
width: 400px;
height: 150px;
}
.container img {
width: 100%;
height: 400px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
header {
height: 150px;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 20%;
width: 400px;
height: 145px;
font-size: 1.2rem;
text-align: center;
font-weight: bold;
}
/* DESKTOP STYLES */
@media screen and (min-width: 1000px) {
/* applies to screens wider than 999px */
body {
background: white;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 40%;
width: 800px;
height: 70px;
font-size: 1.2rem;
text-align: center;
}
.container img {
width: 100%;
height: 600px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
