Why is there an extra space in my webpage? - html

Question

https://capr1sun.github.io/popsociology/
The main page of my website has an extra space on the right side which shows when I simulate smaller devices (iPhones). And on my desktop, there's a horizontal scroll bar at the bottom. How do I get rid of the extra space so the content fits exactly on the screen?
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>

Answer 1

The problem is in
footer {
width: 100vw;
}
You can just remove it or use 100% rather than 100vw, and add width: 100% to body tag.

Answer 2

There is a scroll due to the size of the anchors text. So you can set a relative size to them. For example font-size: 2.2vw for .icon-container:
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
font-size: 2.2vw; /* here */
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>

Answer 3

your width property in footer element cause overflow-x this snippet may help:
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
footer {
width: 100%;
}