htmlcssweb-frontend
Why is the right of my webpage content disappearing on smaller browsers / mobile browser view?
I'm doing Meta's Front End Web Development lessons on Coursera.org and have nearly finished my client project for the "HTML and CSS in depth" sessions. But when I make my browser smaller or view the mobile browsers via Inspect, the right-hand side of my content is cut-off slightly and shows no white space like the left-hand side.
Inspect screenshot:
Smaller browser screenshot against my desktop:
Here is a snippet with my current code
body {
background-color: rgb(250, 250, 250);
font-family: 'markazi text', serif;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: 5%;
margin-right: 5%;
scroll-margin-right: 5%;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
header>img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.image-container {
text-align: center;
}
.image-container img {
display: inline-block;
}
nav {
background-color: #71d1a1;
text-align: center;
padding: 2px;
border-radius: 10px;
width: 100%;
}
nav a {
color: #ffffff;
text-decoration: none;
padding: 10px 15px;
font-size: 25px;
}
nav a:hover {
background-color: #5bb98b;
color: #ffffff;
border-radius: 10px;
text-decoration: underline;
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
}
nav li:not(:last-child)::after {
content: "|";
margin: 0 10px;
}
section {
display: flex;
}
article {
flex: 1;
border-radius: 10px;
}
.spaced-section article {
background-color: #fbe9d3;
border: 1px solid #ddd;
padding: 15px;
margin: 10px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.spaced-section article img {
width: 100%;
height: auto;
display: block;
}
.spaced-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 2rem;
}
p {
font-size: 22px;
}
a.promotion-banner {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
}
a.promotion-banner article {
transition: transform 0.6s ease-in-out;
cursor: pointer;
}
a.promotion-banner:hover {
text-decoration: none;
}
a.promotion-banner:hover h1 {
text-decoration: underline;
text-decoration-thickness: 2px;
}
a.promotion-banner:hover button {
text-decoration: underline;
}
a.promotion-banner:hover article {
transform: scale(1.05);
}
button {
color: #ffffff;
background-color: #71d1a1;
font-size: 20px;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
transition: background-color 0.3s, transform 0.3s;
cursor: pointer;
}
button:hover {
background-color: #5bb98b;
}
.button {
color: #ffffff;
background-color: #71d1a1;
font-size: 20px;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
transition: background-color 0.3s, transform 0.3s;
}
.button:hover {
background-color: #5bb98b;
text-decoration: underline;
}
footer {
display: flex;
}
footer div {
flex: 1;
}
@media (max-width: 768px) {
section {
flex-direction: column;
align-items: center;
}
.spaced-section {
flex-direction: column;
gap: 10px;
}
article {
width: 100%;
max-width: 100%;
text-align: center;
}
footer {
flex-direction: column;
align-items: center;
}
nav ul {
display: block;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 10px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lucky Shrub</title>
<meta name="description" content="A brief description">
<meta name="author" content="Little Lemon Restuarant">
<link rel="stylesheet" href="client project.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="Lucky-Shrub-logos/Asset%202@3x.png" alt="Lucky Shrub logo" width="75" height="auto">
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Designs</a></li>
<li><a href="book.html">Shop</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section class="spaced-section">
<a href="shop.html" class="promotion-banner">
<article>
<h1>30% discount on outdoor plants this weekend</h1>
<p>
Find a new addition from our small plant nursery to transform your garden space into an oasis you can be proud of.
</p>
<button>Shop now</button>
</article>
</a>
</section>
<section class="spaced-section">
<article class="centered-image">
<div class="image container">
<img src="garden design.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
</div>
<h2>Boutique garden design</h2>
<p>
We provide garden design, creation, maintenance, and landscaping for budgets large and small.
</p>
<p>
<a href="design.html" class="button">Explore ideas</a>
</p>
</article>
<article>
<img src="indoor and outdoor plants.jpg" alt="Indoor and outdoor plants" width="250" height="166.70000000000002">
<h2>Buy plants</h2>
<p>
Take a look at our entire range of indoor and outdoor plants to see what could improve your green space.
</p>
<p>
<a href="design.html" class="button">Browse range</a>
</p>
</article>
<article>
<img src="Contact us.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
<h2>About us</h2>
<p>
<p>Lucky Shrub is run by husband and wife team Jason and Maria, who share a long-time love for plants.</p>
</style>
</p>
<p>
<a href="design.html" class="button">Contact details</a>
</p>
</article>
</section>
</main>
<footer>
<div>
<img src="Lucky-Shrub-logos/Asset%202@3x.png" alt="Lucky Shrub logo" width="25" height="auto">
</div>
<div>
<p>Copyright © 2024 Lucky Shrub</p>
</div>
</footer>
</body>
</html>I'm new to coding so I know the answer will be painfully obvious! I hope you can help. Thank you.
Here is my code as it currently stands, before being reformatted in the snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lucky Shrub</title>
<meta name="description" content="A brief description">
<meta name="author" content="Little Lemon Restuarant">
<link rel="stylesheet" href="client project.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="Lucky-Shrub-logos/Asset%202@3x.png" alt="Lucky Shrub logo" width="75" height="auto">
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Designs</a></li>
<li><a href="book.html">Shop</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section class="spaced-section">
<a href="shop.html" class="promotion-banner">
<article>
<h1>30% discount on outdoor plants this weekend</h1>
<p>
Find a new addition from our small plant nursery to transform your garden space into an oasis you can be proud of.
</p>
<button>Shop now</button>
</article>
</a>
</section>
<section class="spaced-section">
<article class="centered-image">
<div class="image container">
<img src="garden design.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
</div>
<h2>Boutique garden design</h2>
<p>
We provide garden design, creation, maintenance, and landscaping for budgets large and small.
</p>
<p>
<a href="design.html" class="button">Explore ideas</a>
</p>
</article>
<article>
<img src="indoor and outdoor plants.jpg" alt="Indoor and outdoor plants" width="250" height="166.70000000000002">
<h2>Buy plants</h2>
<p>
Take a look at our entire range of indoor and outdoor plants to see what could improve your green space.
</p>
<p>
<a href="design.html" class="button">Browse range</a>
</p>
</article>
<article>
<img src="Contact us.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
<h2>About us</h2>
<p>
<p>Lucky Shrub is run by husband and wife team Jason and Maria, who share a long-time love for plants.</p>
</style>
</p>
<p>
<a href="design.html" class="button">Contact details</a>
</p>
</article>
</section>
</main>
<footer>
<div>
<img src="Lucky-Shrub-logos/Asset%202@3x.png" alt="Lucky Shrub logo" width="25" height="auto">
</div>
<div>
<p>Copyright © 2024 Lucky Shrub</p>
</div>
</footer>
</body>
</html>
body {
background-color: rgb(250, 250, 250);
font-family: 'markazi text', serif;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: 5%;
margin-right: 5%;
scroll-margin-right: 5%;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
header > img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.image-container {
text-align: center;
}
.image-container img {
display: inline-block;
}
nav {
background-color: #71d1a1;
text-align: center;
padding: 2px;
border-radius: 10px;
width: 100%;
}
nav a {
color: #ffffff;
text-decoration: none;
padding: 10px 15px;
font-size: 25px;
}
nav a:hover {
background-color: #5bb98b;
color: #ffffff;
border-radius: 10px;
text-decoration: underline;
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
}
nav li:not(:last-child)::after {
content: "|";
margin: 0 10px;
}
section {
display: flex;
}
article {
flex: 1;
border-radius: 10px;
}
.spaced-section article {
background-color: #fbe9d3;
border: 1px solid #ddd;
padding: 15px;
margin: 10px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.spaced-section article img {
width: 100%;
height: auto;
display: block;
}
.spaced-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 2rem;
}
p {
font-size: 22px;
}
a.promotion-banner {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
}
a.promotion-banner article {
transition: transform 0.6s ease-in-out;
cursor: pointer;
}
a.promotion-banner:hover {
text-decoration: none;
}
a.promotion-banner:hover h1 {
text-decoration: underline;
text-decoration-thickness: 2px;
}
a.promotion-banner:hover button {
text-decoration: underline;
}
a.promotion-banner:hover article {
transform: scale(1.05);
}
button {
color: #ffffff;
background-color: #71d1a1;
font-size: 20px;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
transition: background-color 0.3s, transform 0.3s;
cursor: pointer;
}
button:hover {
background-color: #5bb98b;
}
.button {
color: #ffffff;
background-color: #71d1a1;
font-size: 20px;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
transition: background-color 0.3s, transform 0.3s;
}
.button:hover {
background-color: #5bb98b;
text-decoration: underline;
}
footer {
display: flex;
}
footer div {
flex: 1;
}
@media (max-width: 768px) {
section {
flex-direction: column;
align-items: center;
}
.spaced-section {
flex-direction: column;
gap: 10px;
}
article {
width: 100%;
max-width: 100%;
text-align: center;
}
footer {
flex-direction: column;
align-items: center;
}
nav ul {
display: block;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 10px;
}
}
Solution
The main step to fixing that is to add box-sizing: border-box; to pretty much everything, i.e.
* {
box-sizing: border-box;
}
This calculates the padding and borders as part of given widths and heights, which are otherwise added, which again results in what you see in your example. (for example 100% width plus paddings left/right will create something wider than 100%)
* {
box-sizing: border-box;
}
body {
background-color: rgb(250, 250, 250);
font-family: 'markazi text', serif;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: 5%;
margin-right: 5%;
scroll-margin-right: 5%;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
header>img {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.image-container {
text-align: center;
}
.image-container img {
display: inline-block;
}
nav {
background-color: #71d1a1;
text-align: center;
padding: 2px;
border-radius: 10px;
width: 100%;
}
nav a {
color: #ffffff;
text-decoration: none;
padding: 10px 15px;
font-size: 25px;
}
nav a:hover {
background-color: #5bb98b;
color: #ffffff;
border-radius: 10px;
text-decoration: underline;
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
}
nav li:not(:last-child)::after {
content: "|";
margin: 0 10px;
}
section {
display: flex;
}
article {
flex: 1;
border-radius: 10px;
}
.spaced-section article {
background-color: #fbe9d3;
border: 1px solid #ddd;
padding: 15px;
margin: 10px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.spaced-section article img {
width: 100%;
height: auto;
display: block;
}
.spaced-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 2rem;
}
p {
font-size: 22px;
}
a.promotion-banner {
display: block;
text-decoration: none;
color: inherit;
width: 100%;
}
a.promotion-banner article {
transition: transform 0.6s ease-in-out;
cursor: pointer;
}
a.promotion-banner:hover {
text-decoration: none;
}
a.promotion-banner:hover h1 {
text-decoration: underline;
text-decoration-thickness: 2px;
}
a.promotion-banner:hover button {
text-decoration: underline;
}
a.promotion-banner:hover article {
transform: scale(1.05);
}
button {
color: #ffffff;
background-color: #71d1a1;
font-size: 20px;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
transition: background-color 0.3s, transform 0.3s;
cursor: pointer;
}
button:hover {
background-color: #5bb98b;
}
.button {
color: #ffffff;
background-color: #71d1a1;
font-size: 20px;
padding: 10px 20px;
border-radius: 10px;
display: inline-block;
transition: background-color 0.3s, transform 0.3s;
}
.button:hover {
background-color: #5bb98b;
text-decoration: underline;
}
footer {
display: flex;
}
footer div {
flex: 1;
}
@media (max-width: 768px) {
section {
flex-direction: column;
align-items: center;
}
.spaced-section {
flex-direction: column;
gap: 10px;
}
article {
width: 100%;
max-width: 100%;
text-align: center;
}
footer {
flex-direction: column;
align-items: center;
}
nav ul {
display: block;
padding: 0;
margin: 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 10px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lucky Shrub</title>
<meta name="description" content="A brief description">
<meta name="author" content="Little Lemon Restuarant">
<link rel="stylesheet" href="client project.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="Lucky-Shrub-logos/Asset%202@3x.png" alt="Lucky Shrub logo" width="75" height="auto">
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Designs</a></li>
<li><a href="book.html">Shop</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section class="spaced-section">
<a href="shop.html" class="promotion-banner">
<article>
<h1>30% discount on outdoor plants this weekend</h1>
<p>
Find a new addition from our small plant nursery to transform your garden space into an oasis you can be proud of.
</p>
<button>Shop now</button>
</article>
</a>
</section>
<section class="spaced-section">
<article class="centered-image">
<div class="image container">
<img src="garden design.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
</div>
<h2>Boutique garden design</h2>
<p>
We provide garden design, creation, maintenance, and landscaping for budgets large and small.
</p>
<p>
<a href="design.html" class="button">Explore ideas</a>
</p>
</article>
<article>
<img src="indoor and outdoor plants.jpg" alt="Indoor and outdoor plants" width="250" height="166.70000000000002">
<h2>Buy plants</h2>
<p>
Take a look at our entire range of indoor and outdoor plants to see what could improve your green space.
</p>
<p>
<a href="design.html" class="button">Browse range</a>
</p>
</article>
<article>
<img src="Contact us.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
<h2>About us</h2>
<p>
<p>Lucky Shrub is run by husband and wife team Jason and Maria, who share a long-time love for plants.</p>
</style>
</p>
<p>
<a href="design.html" class="button">Contact details</a>
</p>
</article>
</section>
</main>
<footer>
<div>
<img src="Lucky-Shrub-logos/Asset%202@3x.png" alt="Lucky Shrub logo" width="25" height="auto">
</div>
<div>
<p>Copyright © 2024 Lucky Shrub</p>
</div>
</footer>
</body>
</html>