How can i put the text beside the image? Like upper - html

#div1 {
text-align: center;
font-family: serif;
animation: fadeIn 2s;
color: white;
font-style: italic;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html {
background-color: black;
}
#poza {
border: 3px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 500px;
height: 300px;
display: block;
margin-left: auto;
margin-right: 1%;
animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#text {
float: left;
color: white;
position: absolute;
}
<div id="div1">
<h1 id="titlu">Titlu</h1>
</div>
<br>
<img id="poza" src="exemplu.jpg" alt="exemplu">
<p id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
Those HTML and CSS Code shows an image to right, a centered title, and a text that I can't align. I tried something with float-left, but did not seem to work.
enter image description here
There is an image here to show you. Maybe it is because of the margins?


You will have to do changes in your #poza declaration.
#div1 {
text-align: center;
font-family: serif;
animation: fadeIn 2s;
color: white;
font-style: italic;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html {
background-color: black;
}
#poza {
border: 3px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 500px;
height: 300px;
display:block;
margin: auto;//added this
// margin-left: auto; commented this
//margin-right: 1%; commented this
animation: fadeIn 5s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#text {
float: left;
color: white;
position: absolute;
}
<div id="div1">
<h1 id="titlu">Titlu</h1>
</div>
<br>
<img id="poza" src="data:image/jpeg;base64,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" alt="exemplu">
<p id="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin libero nunc consequat interdum varius sit amet mattis. <br> Neque volutpat ac tincidunt vitae semper.
Amet tellus cras adipiscing enim. Id semper risus in hendrerit gravida rutrum quisque non tellus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat <br> vivamus. Tempor id eu nisl nunc mi ipsum faucibus vitae. Eget gravida cum
sociis natoque penatibus et magnis. Eu scelerisque felis imperdiet proin. Id diam maecenas ultricies mi eget. Elementum tempus<br> egestas sed sed. Ut tortor pretium viverra suspendisse potenti nullam ac tortor.</p>

Related

Why does the width of my web page extend beyond my viewport?

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">Home Elements Services Contact</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"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook"></p>
<p>This website was designed by Name</p>
</footer>
</body>
<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" class="s-jHz34e3aRDB7"></div>
</div>
</body>

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.

Change the footer CSS width unit from vw to %:
footer {
background: var(--main-color);
width: 100%;
padding: 20px 0;
text-align: center;
}

: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">Home Elements Services Contact</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"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Facebook_icon_2013.svg" alt="facebook">
</p>
<p>This website was designed by Name</p>
</footer>
</body>

I want to move in my navigation bar in a non gimmicky way

I'm quite very new to HMTL and CSS, having just coded in C# before.
I got this fiddle here
https://jsfiddle.net/4asrj9x6/24/
<html>
<header>
<body>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
What I want to accomplish is to move in my nav bar links from the right edge. So that the end of 'About' is sort of aligned with the end of the third image.
What I've tried is to add a lot of padding to the navigation class. However this feels super gimmicky and it doesn't scale well at all. Since as soon as you move the window even a tiny bit it goes all wrong.
There should be a better way to do this but I feel kind of stuck.

You have to give your nav-bar a width to work with, since you have justify-content set to flex-end it will always be on the end depending on the width you have set.
Give your nav-bar a reasonable width and line in up with the third image.
Final code:
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
width: --your-desirable-width;
margin-right: auto;
}
This is responsable and it'll always be ..% of the screen.

so this should be what you are looking for, I have used css position: sticky; and have added only 2 lines of code in the styling of the header
<html>
<body>
<style>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
position: sticky;
top: 0;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
</style>
<header>
<nav>
<ul class="navigation">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>

Why does position:fixed on the right and left containers break this layout?

I want the containers to stick while you scroll down the page, but when I add "position:fixed" it breaks the layout for some reason, making everything go over to the left. i added the code with position:fixed added to the containers, and here's an example of what it's supposed to look like without:
enter image description here
body {
font-family: arial;
background: #222;
}
img {
width: 100%;
display: block;
}
#wrapper {
width: 1000px;
margin: 100px 0 100px 0;
}
#container_left {
border: 1px solid red;
background: #fff;
font-size: 14;
width: 150px;
height: auto;
text-align: center;
float: left;
position: fixed;
}
.post {
border: 1px solid red;
background: #fff;
font-size: 20px;
padding: 10px;
width: 500px;
height: auto;
text-align: center;
float: left;
margin: 0 80px 0 80px;
}
#container_right {
border: 1px solid red;
background: #fff;
font-size: 14;
width: 150px;
height: auto;
text-align: center;
float: left;
position: fixed;
}
.text_container {
border: 1px solid red;
margin: 10px 10px 10px 10px;
}
.text {
vertical-align: bottom;
}
.text p {
margin: 0;
}
<body>
<div align="center">
<div id="wrapper">
<div id="container_left">
<div class="text_container">
<div class="text">
{block:Description}
<div
style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
{text:Description}</div>
{/block:Description}
</div> <!-- text -->
</div> <!-- text container -->
</div> <!-- container left -->
<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.
</div> <!-- post -->
<div id="container_right">
<div class="text_container">
<div class="text">
<div
style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
{text:Extra Box}</div>
</div> <!-- text -->
</div> <!-- text container -->
</div> <!-- container right -->
</div> <!-- wrapper -->
</div> <!-- center -->
</body>

I have found some issues and have fixed that. Some points that I have noticed are.
Specify right/left with bottom/top values for fixed positioned elements to make them fixed at a position.
Use margin: 0 auto inorder to align the center portion.
Never make use of float along with margin: 0 auto. Using float will prevent margin: 0 auto from its desired behaviour.
Hope this is helpful.
body {
font-family: arial;
background: #222;
}
img {
width: 100%;
display: block;
}
#wrapper {
/* width: 1000px;
margin: 100px 0 100px 0; */
width: 100%; /* Use your desired width*/
}
#container_left {
border: 1px solid red;
background: #fff;
font-size: 14;
width: 150px;
height: auto;
text-align: center;
position: fixed;
left: 0;
top: 0;
}
.post {
border: 1px solid red;
background: #fff;
font-size: 20px;
padding: 10px;
width: 500px;
height: auto;
text-align: center;
/* float: left; :Using float will break the margin:0 auto to break*/
margin: 0 auto;
}
#container_right {
border: 1px solid red;
background: #fff;
font-size: 14;
width: 150px;
height: auto;
text-align: center;
/* float: left; :Using float will break the margin:0 auto to break*/
position: fixed;
right: 0;
top: 0;
}
.text_container {
border: 1px solid red;
margin: 10px 10px 10px 10px;
}
.text {
vertical-align: bottom;
}
.text p {
margin: 0;
}
<body>
<div align="center">
<div id="wrapper">
<div id="container_left">
<div class="text_container">
<div class="text">
{block:Description}
<div
style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
{text:Description}</div>
{/block:Description}
</div> <!-- text -->
</div> <!-- text container -->
</div> <!-- container left -->
<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.
</div> <!-- post -->
<div id="container_right">
<div class="text_container">
<div class="text">
<div
style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
{text:Extra Box}</div>
</div> <!-- text -->
</div> <!-- text container -->
</div> <!-- container right -->
</div> <!-- wrapper -->
</div> <!-- center -->
</body>
Want to get rid of this positioning overheads? Go for flex. its just awesome. Here is a sample implementation for your question.
body {
font-family: arial;
background: #222;
overflow: hidden;
}
img {
width: 100%;
display: block;
}
#wrapper {
width: 100%;
display: flex;
}
#container_left {
border: 1px solid red;
background: #fff;
font-size: 14;
/* width: 150px; */
/* height: auto; */
text-align: center;
}
.post {
border: 1px solid red;
background: #fff;
font-size: 20px;
padding: 10px;
/* width: 500px; */
height: auto;
text-align: center;
margin: 0 auto;
max-height: 100vh;
overflow: auto;
box-sizing: border-box;
}
#container_right {
border: 1px solid red;
background: #fff;
font-size: 14;
/* width: 150px; */
/* height: auto; */
text-align: center;
}
.text_container {
border: 1px solid red;
margin: 10px 10px 10px 10px;
}
.text {
vertical-align: bottom;
}
.text p {
margin: 0;
}
<body>
<div align="center">
<div id="wrapper">
<div>
<div id="container_left">
<div class="text_container">
<div class="text">
{block:Description}
<div
style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
{text:Description}</div>
{/block:Description}
</div> <!-- text -->
</div> <!-- text container -->
</div> <!-- container left -->
</div>
<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Pellentesque habitant morbi tristique senectus et netus. Viverra suspendisse
potenti nullam ac tortor vitae purus. In metus vulputate eu scelerisque felis. Odio morbi quis commodo
odio aenean sed. Amet consectetur adipiscing elit duis. Eget arcu dictum varius duis at consectetur
lorem. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Mollis nunc sed id semper.
Bibendum arcu vitae elementum curabitur vitae nunc sed. Nibh tellus molestie nunc non blandit massa enim
nec. Id donec ultrices tincidunt arcu. Adipiscing tristique risus nec feugiat in fermentum. Pretium quam
vulputate dignissim suspendisse in est ante. Tincidunt ornare massa eget egestas purus viverra accumsan
in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Tellus at urna condimentum mattis
pellentesque id nibh tortor id. Morbi tristique senectus et netus et malesuada fames ac. Amet facilisis
magna etiam tempor orci eu. Ut tellus elementum sagittis vitae et leo duis ut diam.
</div> <!-- post -->
<div>
<div id="container_right">
<div class="text_container">
<div class="text">
<div
style="height:auto;max-height:112px;overflow:auto;scrollbar-width:thin;padding:0 3px 0 3px;">
{text:Extra Box}</div>
</div> <!-- text -->
</div> <!-- text container -->
</div> <!-- container right -->
</div>
</div> <!-- wrapper -->
</div> <!-- center -->
</body>

With position fixed you need to set a left/right property instead of a float.
Try changing the right container to the code below and then adjust your other css accordingly:
#container_right {
border:1px solid red;
background:#fff;
font-size:14;
width:150px;
height:auto;
text-align:center;
position:fixed;
right: 10px;
}

Centring multiple lines of texts in a table cell

I'm using the table method to centre multiple lines of text in a table cell. But despite following multiple SO posts and other online guides, I'm unable to centre the text.
What I want is to centre the text inside the grey part of the divs background (see image below), then when I resize the browser, I want it to span across the entire width of the div (but that's a future problem). For now, can someone take a long at my CSS code (maybe it's the HTML code setup) and tell me why it isn't centring?
HTML
<div id = "about">
<div id = "header">
<h3>About.</h3>
<div id = "about-background">
<div id = "about-text" class="left-grid">
<p>Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. Nam phasellus, purus ut magna amet. Sit adipiscing duis eget hendrerit, nec egestas magna a odio augue sapien, magna a elementum rutrum placerat mauris, sed in.</p>
</div>
</div>
</div>
</div>
CSS
#about #header {
padding: 10px 0px;
text-align: center;
font-size: 36px;
}
#about-background {
height: 525px;
background: linear-gradient(90deg, #bbc6cb 50%, #ffffff 50%);
}
#about-text {
font-family: Quicksand;
font-size: 22px;
line-height: 35px;
font-weight: 300;
width: 45%;
display: table;
}
#about-text p {
display: table-cell;
text-align: center;
vertical-align: middle;
}

#about #header {
padding: 10px 0px;
text-align: center;
font-size: 36px;
}
#about-background {
height: 525px;
background: lightgrey;
display: table;
}
#about-text {
font-family: Quicksand;
font-size: 18px;
line-height: 35px;
font-weight: 300;
width: 45%;
margin: 0 auto;
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id = "about">
<div id = "header">
<h3>About.</h3>
<div id = "about-background">
<div id = "about-text">
<p>Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. </p>
</div>
</div>
</div>
</div>

The width property in #about-text is causing your text to be only shown at 45% of the page. Once you remove that and increase your background length to 100% it will be centered.
#about #header {
padding: 10px 0px;
text-align: center;
font-size: 36px;
}
#about-background {
margin: auto;
background: linear-gradient(90deg, #bbc6cb 100%, #ffffff 100%);
}
#about-text {
font-family: Quicksand;
font-size: 22px;
line-height: 35px;
font-weight: 300;
display: table;
}
#about-text p {
display: table-cell;
text-align: center;
}
<div id = "about">
<div id = "header">
<h3>About.</h3>
<div id = "about-background">
<div id = "about-text" class="left-grid">
<p >Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. Nam phasellus, purus ut magna amet. Sit adipiscing duis eget hendrerit, nec egestas magna a odio augue sapien, magna a elementum rutrum placerat mauris, sed in.</p>
</div>
</div>
</div>
</div>

Footer does not stick to the bottom even when it is set to position: absolute;

I am creating a footer for my site and I wanted the footer to be fixed at the bottom. But when I scroll down, this won't go along with the document. It stays at the bottom of the page always. I have initialized the footer to position: absolute, and also added bottom: 0 of my CSS code. But it still stuck in the middle of the page. How can I resolve this everyone?
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer,
.lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
By the way, my footer has two different footers, the upper footer and the lower footer and both footers are inside a div called ".footer"

You need to add a position: relative; on a parent div or to the body tag wich I did. This will then position it to the bottom of the page becuase the body tag spans the entire document.
body {
position: relative;
}
.lorem {
line-height: 100px;
}
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer, .lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<body>
<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Risus nec feugiat in fermentum posuere urna nec tincidunt. Eleifend mi in nulla posuere sollicitudin. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Eget nunc scelerisque viverra mauris. Pretium aenean pharetra magna ac placerat vestibulum. Amet justo donec enim diam vulputate ut pharetra. Nisl tincidunt eget nullam non nisi est sit amet. Nunc lobortis mattis aliquam faucibus purus. Quisque egestas diam in arcu cursus euismod. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Vestibulum mattis ullamcorper velit sed.
Diam vel quam elementum pulvinar etiam. In metus vulputate eu scelerisque felis imperdiet. Mi eget mauris pharetra et ultrices. Pretium lectus quam id leo in. Diam phasellus vestibulum lorem sed risus ultricies tristique. Maecenas volutpat blandit aliquam etiam erat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Arcu cursus vitae congue mauris rhoncus. Malesuada nunc vel risus commodo. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim convallis aenean et tortor at. Faucibus in ornare quam viverra orci sagittis.
Vitae congue eu consequat ac. Id diam maecenas ultricies mi. Diam sollicitudin tempor id eu nisl nunc. In egestas erat imperdiet sed. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Dis parturient montes nascetur ridiculus mus mauris vitae. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam adipiscing vitae proin sagittis. Urna porttitor rhoncus dolor purus. Quis blandit turpis cursus in hac habitasse platea. Curabitur gravida arcu ac tortor dignissim convallis aenean. Iaculis nunc sed augue lacus viverra.
Quis eleifend quam adipiscing vitae proin sagittis. Nibh tortor id aliquet lectus proin nibh. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Aliquam faucibus purus in massa tempor nec feugiat. Magna ac placerat vestibulum lectus. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Viverra maecenas accumsan lacus vel facilisis volutpat est. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Sollicitudin tempor id eu nisl. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Id diam vel quam elementum pulvinar etiam non quam. Ultrices eros in cursus turpis. Pretium lectus quam id leo. Malesuada fames ac turpis egestas maecenas. Odio facilisis mauris sit amet massa vitae tortor. Amet porttitor eget dolor morbi non arcu risus.</div>
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
</body>

I think you set the footer property
position : fixed
left: 0;
bottom: 0;
width: 100%;
and maybe your problem will be solved.

If you want full-width footer at bottom of page try this
{
position : absolute
left: 0;
right : 0;
bottom: 0;
}
And you want the full-width footer to slide along the page
{
position : fixed
left: 0;
right : 0;
bottom: 0;
}
Happy coding