Why does the width of my web page extend beyond my viewport?
Question
I have this web page. All the content of the web page is within the size of my desktop's view port. However, the width of the page still goes beyond the view port. I even tried putting margin and padding at 0 but nothing worked. It also looks especially awkward in mobile view. How do I fix that?
Below is the code:
:root { --main-color:#ff9955ff; --secondary-color:yellow; --dark-color:#444; --light-color:#fafafa; } body { font-family: Montserrat, sans-serif; background: var(--light-color); color: var(--dark-color); text-align: justify; margin: 0px; padding: 0px; display: flex; flex-direction: column; align-items: center; padding: 10px; font-size: 18px; }::selection { background: var(--main-color); color: var(--light-color); } a { text-decoration: none; color: var(--dark-color); } input { box-sizing: border-box; }.box { background: red; height: 100px; width: 100px; }.center-text { text-align: center; }.columns-two, .columns-three, .columns-four, .columns-six { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: center; gap: 30px; }.columns-two div { width: clamp(480px, 480px, 100%); }.columns-three div { width: clamp(200px, calc((1000px - (30px * 2)) / 3), 100%); }.columns-four div { width: calc((1000px - (30px * 3)) / 4); }.columns-six div { width: calc((1000px - (30px * 5)) / 6); }.horizontal { display: flex; align-items: center; align-content: center; justify-content: center; gap: 20px; }.max-height { min-height: 100vh; }.half-height { min-height: calc(100vh / 2); }.max-width { width: clamp(200px, 90vw, 1000px); }.vertical { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; }.wrap { display: flex; flex-wrap: wrap; } /* header */.header { height: 70px; justify-content: space-between; }.title { height: 100%; }.title img { height: 100%; width: clamp(0px,250px,60%); }.nav-toggle-checkbox, .nav-toggle-spans { position: fixed; top: 2.5%; right: -100vw; height: clamp(10px,80px,20vw); width: clamp(10px,80px,20vw); }.nav-toggle-checkbox { opacity: 0; }.nav-toggle-spans span { height: 20%; background: var(--main-color); margin: 10% 0; display:flex; flex-direction: row; z-index: 2; transition: 400ms; }.navbar { display: flex; gap: 2.5px; transition: 300ms; }.navbar a { margin: 5px; } /* footer */ footer { background: var(--main-color); width: 100vw; padding: 20px 0; text-align: center; }.socials { gap: 10px; } footer img { height: 50px; width: 50px; } @media screen and (max-width:700px) {.nav-toggle-checkbox, .nav-toggle-spans { right: 5%; transition: 400ms; }.nav-toggle-spans { z-index: 2; }.nav-toggle-checkbox { z-index: 3; }.nav-toggle-checkbox:checked ~.nav-toggle-spans span { background: var(--light-color); transition: 400ms; }.nav-toggle-checkbox:checked ~.nav-toggle-spans.nav-span-one { position: relative; top: 30%; /* Changed from 100% */ transform: rotate(45deg); transition: 400ms; }.nav-toggle-checkbox:checked ~.nav-toggle-spans.nav-span-two { opacity: 0; }.nav-toggle-checkbox:checked ~.nav-toggle-spans.nav-span-three { position: relative; top: -30%; transform: rotate(-45deg); transition: 400ms; }.navbar, .nav-toggle-checkbox:not(:checked) ~.navbar { position:fixed; top: 0; right: -100vh; height: 100%; display: flex; flex-direction: column; justify-content:flex-start; background: var(--main-color); opacity: 90%; border-left: 4px solid var(--secondary-color); padding: 150px 5% 0 50px; z-index: 1; transition: 400ms; }.nav-toggle-checkbox:checked ~.navbar { right: 0; transition: 400ms; }.nav-toggle-checkbox:checked ~.navbar a { color: var(--light-color); text-align: right; font-size: 1.25em; } }
<body tabindex="-1"> <div id="svelte"> <body> <div class="max-width"> <header class="header horizontal"> <div class="title"><img loading="lazy" src="./logo-title.svg" alt="Title"></div> <input type="checkbox" class="nav-toggle-checkbox"> <div class="nav-toggle-spans"><span class="nav-span-one"></span> <span class="nav-span-two"></span> <span class="nav-span-three"></span></div> <nav class="navbar"><a href="/">Home</a> <a href="elements">Elements</a> <a href="services">Services</a> <a href="contact">Contact</a></nav> </header> <,--<Header>--> <head> <title>Home - CSS Templates</title> </head> <section class="vertical"> <h2>2 Columns</h2> <div class="wrap columns-two"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus,</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus,</p> </div> </div> </section> <,--<ColumnsTwo>--> <section class="vertical max-height"> <h2>3 Columns</h2> <div class="wrap columns-three"> <div> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras, Sed faucibus turpis in eu mi bibendum neque egestas congue,</p> </div> <div> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras, Sed faucibus turpis in eu mi bibendum neque egestas congue,</p> </div> <div> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras, Sed faucibus turpis in eu mi bibendum neque egestas congue,</p> </div> </div> </section> <.--<ColumnsThree>--> <section class="vertical"> <hr> <h2>4 Columns</h2> <div class="wrap columns-four"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <hr> </section> <.--<ColumnsFour>--> <section class="vertical"> <hr> <h2>6 Columns</h2> <div class="wrap columns-six"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <hr> </section> <.--<ColumnsSix>--> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet consectetur: Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus.</p> <footer> <p class="socials"><a href="www.facebook;com" target="_blank"><img src="https;//upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013:svg" alt="facebook"></a> . . <a href="www.facebook;com" target="_blank"><img src="https;//upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013:svg" alt="facebook"></a> . . <a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a></p> <p>This website was designed by <a href="google.com">Name</a></p> </footer> </body> <div id="svelte-announcer" aria-live="assertive" aria-atomic="true" class="s-jHz34e3aRDB7"></div> </div> </body>
3 answers
solution1
0 2021-12-12 13:53:37
Go to the top of the CSS and put "* {width: 100%}". If that doesn't work, you might have to manually change the width until it fits the size of your viewport.
Please mark this as an answer if this helped you.
solution2
0 2021-12-12 19:23:46
Change the footer CSS width unit from vw to %:
footer {
background: var(--main-color);
width: 100%;
padding: 20px 0;
text-align: center;
}
solution3
0 2021-12-23 19:57:05
:root {
--main-color: #ff9955ff;
--secondary-color: yellow;
--dark-color: #444;
--light-color: #fafafa;
}
body {
font-family: Montserrat, sans-serif;
background: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
font-size: 18px;
}
#svelte {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: center;
align-items: center;
}
::selection {
background: var(--main-color);
color: var(--light-color);
}
a {
text-decoration: none;
color: var(--dark-color);
}
input {
box-sizing: border-box;
}
.box {
background: red;
height: 100px;
width: 100px;
}
.center-text {
text-align: center;
}
.columns-two,
.columns-three,
.columns-four,
.columns-six {
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: center;
gap: 30px;
}
.columns-two div {
width: clamp(480px, 480px, 100%);
}
.columns-three div {
width: clamp(200px, calc((1000px - (30px * 2)) / 3), 100%);
}
.columns-four div {
width: calc((1000px - (30px * 3)) / 4);
}
.columns-six div {
width: calc((1000px - (30px * 5)) / 6);
}
.horizontal {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
gap: 20px;
}
.max-height {
min-height: 100vh;
}
.half-height {
min-height: calc(100vh / 2);
}
.max-width {
width: clamp(200px, 90vw, 1000px);
}
.vertical {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;
}
.wrap {
display: flex;
flex-wrap: wrap;
}
/* header */
.header {
height: 70px;
justify-content: space-between;
}
.title {
height: 100%;
}
.title img {
height: 100%;
width: clamp(0px, 250px, 60%);
}
.nav-toggle-checkbox,
.nav-toggle-spans {
position: fixed;
top: 2.5%;
right: -100vw;
height: clamp(10px, 80px, 20vw);
width: clamp(10px, 80px, 20vw);
}
.nav-toggle-checkbox {
opacity: 0;
}
.nav-toggle-spans span {
height: 20%;
background: var(--main-color);
margin: 10% 0;
display: flex;
flex-direction: row;
z-index: 2;
transition: 400ms;
}
.navbar {
display: flex;
gap: 2.5px;
transition: 300ms;
}
.navbar a {
margin: 5px;
}
/* footer */
footer {
background: var(--main-color);
width: 100vw;
padding: 20px 0;
text-align: center;
}
.socials {
gap: 10px;
}
footer img {
height: 50px;
width: 50px;
}
@media screen and (max-width: 700px) {
.nav-toggle-checkbox,
.nav-toggle-spans {
right: 5%;
transition: 400ms;
}
.nav-toggle-spans {
z-index: 2;
}
.nav-toggle-checkbox {
z-index: 3;
}
.nav-toggle-checkbox:checked ~ .nav-toggle-spans span {
background: var(--light-color);
transition: 400ms;
}
.nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-one {
position: relative;
top: 30%; /* Changed from 100% */
transform: rotate(45deg);
transition: 400ms;
}
.nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-two {
opacity: 0;
}
.nav-toggle-checkbox:checked ~ .nav-toggle-spans .nav-span-three {
position: relative;
top: -30%;
transform: rotate(-45deg);
transition: 400ms;
}
.navbar,
.nav-toggle-checkbox:not(:checked) ~ .navbar {
position: fixed;
top: 0;
right: -100vh;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: var(--main-color);
opacity: 90%;
border-left: 4px solid var(--secondary-color);
padding: 150px 5% 0 50px;
z-index: 1;
transition: 400ms;
}
.nav-toggle-checkbox:checked ~ .navbar {
right: 0;
transition: 400ms;
}
.nav-toggle-checkbox:checked ~ .navbar a {
color: var(--light-color);
text-align: right;
font-size: 1.25em;
}
}
<body tabindex="-1">
<div id="svelte">
<body>
<div class="max-width">
<header class="header horizontal">
<div class="title"><img loading="lazy" src="./logo-title.svg" alt="Title"></div> <input type="checkbox" class="nav-toggle-checkbox">
<div class="nav-toggle-spans"><span class="nav-span-one"></span> <span class="nav-span-two"></span> <span class="nav-span-three"></span></div>
<nav class="navbar"><a href="/">Home</a> <a href="elements">Elements</a> <a href="services">Services</a> <a href="contact">Contact</a></nav>
</header>
<!--<Header>-->
<head>
<title>Home - CSS Templates</title>
</head>
<section class="vertical">
<h2>2 Columns</h2>
<div class="wrap columns-two">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Amet luctus
venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam
lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac
turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet
consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam
etiam erat. Id aliquet risus feugiat in ante metus.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Amet luctus
venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
faucibus turpis in eu mi bibendum neque egestas congue. Etiam non quam
lacus suspendisse faucibus interdum posuere lorem. Malesuada fames ac
turpis egestas maecenas pharetra. Lorem ipsum dolor sit amet
consectetur. Ut enim blandit volutpat maecenas volutpat blandit aliquam
etiam erat. Id aliquet risus feugiat in ante metus.</p>
</div>
</div>
</section>
<!--<ColumnsTwo>-->
<section class="vertical max-height">
<h2>3 Columns</h2>
<div class="wrap columns-three">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Amet luctus
venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
faucibus turpis in eu mi bibendum neque egestas congue.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Amet luctus
venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
faucibus turpis in eu mi bibendum neque egestas congue.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Amet luctus
venenatis lectus magna fringilla urna porttitor rhoncus dolor. Nisi quis
eleifend quam adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet
consectetur adipiscing. Eu consequat ac felis donec et odio pellentesque
diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus
scelerisque. Sem et tortor consequat id porta nibh venenatis cras. Sed
faucibus turpis in eu mi bibendum neque egestas congue.</p>
</div>
</div>
</section>
<!--<ColumnsThree>-->
<section class="vertical">
<hr>
<h2>4 Columns</h2>
<div class="wrap columns-four">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<hr>
</section>
<!--<ColumnsFour>-->
<section class="vertical">
<hr>
<h2>6 Columns</h2>
<div class="wrap columns-six">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<hr>
</section>
<!--<ColumnsSix>-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus
magna fringilla urna porttitor rhoncus dolor. Nisi quis eleifend quam
adipiscing vitae proin sagittis nisl. Ipsum dolor sit amet consectetur
adipiscing. Eu consequat ac felis donec et odio pellentesque diam. Volutpat
commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sem et
tortor consequat id porta nibh venenatis cras. Sed faucibus turpis in eu mi
bibendum neque egestas congue. Etiam non quam lacus suspendisse faucibus
interdum posuere lorem. Malesuada fames ac turpis egestas maecenas pharetra.
Lorem ipsum dolor sit amet consectetur. Ut enim blandit volutpat maecenas
volutpat blandit aliquam etiam erat. Id aliquet risus feugiat in ante metus.</p>
</body>
<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" class="s-jHz34e3aRDB7"></div>
</div>
<footer>
<p class="socials"><a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>
<a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>
<a href="www.facebook.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></a>
</p>
<p>This website was designed by <a href="google.com">Name</a></p>
</footer>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why does my scrolling div with text extend beyond its container?
Why does the width of my web page not fill the entire screen width?
Why does the width of my web page changing depending on the screen it displayed at?
Why doesn't my navbar fully extend in width over the page?
Why does my dropdown don't extend fully on my page?
Why does my html web not extend the background and show parts in white?
Why does my form-generated user comment expand beyond borders of a fixed width table and div?
Why does this container expand beyond the viewport?
Why is my footer at the bottom of the viewport and not the bottom of the page?
My Bootstrap row is extending beyond the page width when I resize it?
Related Tags