Develop Reference

How to solve this problem with responsive - blank space on right side?

I'm teaching coding in Visual Studio Code, and I found some template and tried make website. After finishing coding I have problem with responsive which u can see on pictures. There is blank white space and I dont know how to fix it.
https://i.stack.imgur.com/8jvI4.jpg
I tried to change values on #media in CSS, but nothing changes. I would really like someone to help me so I know in future where I made a mistake. I also have this reset.css - that is bootstrap.
Thanks in regards.
/* for navigation*/
var dugme = document.getElementById('dugmeNav');
dugme.addEventListener('click',pokreni,false);
function pokreni() {
document.getElementById("myNav").classList.toggle("meni_sirina");
document
.querySelector(".meni-dugmici")
.classList.toggle("meni-dugmici_style");
}
/* FONTOVI */
#font-face {
font-family: 'Raleway';
src: url('../fontovi/Raleway.ttf');
}
#font-face {
font-family: 'Open Sans';
src: url('../fontovi/OpenSans.ttf');
}
#font-face {
font-family: 'Poppins';
src: url('../fontovi/Poppins.ttf');
}
#font-face {
font-family: 'Roboto';
src: url('../fontovi/Roboto.ttf');
}
/* KRAJ FONTOVA */
body {
font-family: 'Raleway', sans-serif;
color: #0c0c0c;
background-color: #ffffff;
}
.margine {
margin: 90px 0;
}
.padding {
padding: 90px 0;
}
.padding2 {
padding: 45px 0;
}
.padding2-top {
padding-top: 45px;
}
.padding2-bottom {
padding-bottom: 45px;
}
.padding-top {
padding-top: 90px;
}
.padding-bottom {
padding-bottom: 90px;
}
.naslovi h2 {
font-weight: bold;
color: #1d1e31;
text-align: center;
position: relative;
padding-bottom: 10px;
}
.naslovi h2::before {
content: "";
width: 100px;
height: 1px;
background-color: #8547ca;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 0;
}
.hero_next_section-margin {
margin-top: 100px;
}
/*header section*/
.omotac {
height: 100vh;
position: relative;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f7fd), color-stop(45%, #1d1e31));
background: linear-gradient(to right, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
height: auto;
}
#header_sekcija .sekcija {
padding-right: 25px;
padding-left: 25px;
}
#header_sekcija .nav_container {
margin: 0 auto;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link img {
width: 22px;
margin-right: 15px;
}
.navigacija-sekcija.navbar-prosirenje .navbar-nav .nav-link {
padding: 0px 25px;
color: #fefeff;
text-align: center;
font-family: "Roboto", sans-serif;
}
.meni-dugmici {
z-index: 9;
position: absolute;
right: 15px;
top: 14px;
}
.meni-dugmici button {
margin-top: 12px;
outline: none;
border: none;
background-color: transparent;
}
.meni-dugmici span {
display: block;
width: 35px;
height: 5px;
background-color: #fff;
margin: 7px 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.meni-dugmici .meni-dugmici .s-2 {
-webkit-transition: all .1s;
transition: all .1s;
}
.meni-dugmici_style button {
position: fixed;
right: 29px;
top: 14px;
}
.meni-dugmici_style button .s-1 {
-webkit-transform: rotate(45deg) translateY(17px);
transform: rotate(45deg) translateY(17px);
}
.meni-dugmici_style button .s-2 {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
.meni-dugmici_style button .s-3 {
-webkit-transform: rotate(-45deg) translateY(-17px);
transform: rotate(-45deg) translateY(-17px);
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.overlay .closebtn {
position: absolute;
top: 0;
right: 30px;
font-size: 60px;
}
.overlay a {
padding: 0px;
text-decoration: none;
font-size: 22px;
color: #f1f1f1;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay-sadrzaj {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.meni_sirina {
width: 100%;
}
a,
a:hover,
a:focus {
text-decoration: none;
}
a:hover,
a:focus {
color: initial;
}
.btn,
.btn:focus {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
.navigacija-sekcija .nav_search-btn {
background-image: url(../slike/search-icon.png);
background-size: 18px;
background-repeat: no-repeat;
width: 35px;
height: 35px;
padding: 0;
border: none;
margin: 0 40px 0 15px;
background-position: center;
}
.navbar-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-logo img {
width: 40px;
margin-right: 5px;
}
.navbar-logo h1 {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
color: #8547ca;
margin-top: 5px;
}
.navigacija-sekcija {
z-index: 99999;
padding: 15px 0;
}
.navigacija-sekcija .navbar-toggler {
outline: none;
}
.navigacija-sekcija .navbar-toggler .navbar-toggler-icon {
background-image: url(../slike/menu.png);
background-size: 55px;
}
.quote_btn-container a {
display: inline-block;
padding: 5px 15px;
background-color: #fc5d35;
color: #f7f7f7;
font-size: 14px;
text-transform: uppercase;
}
/*end header section*/
/* contact section */
.kontakt_sekcija {
background-color: #f2f7fd;
}
.kontakt_sekcija h3 {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.kontakt_sekcija .row {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kontakt_sekcija input {
border: none;
outline: none;
border-bottom: 1px solid #000;
width: 90%;
margin: 15px 0;
background-color: transparent;
}
.kontakt_sekcija input::-webkit-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input:-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::-ms-input-placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_sekcija input::placeholder {
color: #595959;
font-size: 14px;
}
.kontakt_form-container #posaljiDugme {
border: none;
background-color: #8c60bd;
color: #fff;
font-size: 15px;
padding: 15px 45px;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
}
#kontaktnaslov {
font-size: 26px;
color: #010103;
font-weight: 600;
font-family: 'Raleway', sans-serif;
margin-bottom: 35px;
}
.contact_img-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact_img-box img {
width: 100%;
}
/* end contact section */
/* info section */
.info_sekcija {
background-color: #363636;
color: #ffffff;
font-family: 'Poppins', sans-serif;
padding-left: 20px;
}
.info_sekcija h4 {
margin-bottom: 12px;
font-size: 22px;
}
.info_logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_logo-box h3 {
font-weight: bold;
padding: 5px 35px;
border-bottom: 1.5px solid #8547ca;
}
.info_sekcija ul {
padding: 0;
}
.info_sekcija ul li {
list-style-type: none;
margin: 3px 0;
}
.info_sekcija ul li a {
color: #ffffff;
}
.info_sekcija ul li a:hover {
color: #8547ca;
}
.info_sekcija .form_container input {
width: 225px;
height: 40px;
padding: 10px;
}
.info_sekcija .form_container::-webkit-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container:-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::-ms-input-placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container::placeholder {
color: #ccc8c8;
}
.info_sekcija .form_container .pretplataDugme {
background-color: #8c60bd;
border: none;
outline: none;
color: #fff;
padding: 8px 30px;
margin-top: 15px;
font-size: 15px;
text-transform: uppercase;
}
.mreze_container {
width: 95%;
margin: 0 auto;
border-top: 1px solid #898989;
padding: 25px 0;
}
.info_sekcija .social-box {
margin: 0 auto;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.info_sekcija .social-box img {
width: 35px;
margin-right: 5px;
}
/* end info section */
/* footer section*/
.footer_sekcija {
background-color: #8547ca;
padding: 20px;
}
.footer_sekcija p {
margin: 0;
text-align: center;
color: #fefdfc;
}
.footer_sekcija a {
color: #fefdfc;
}
#media (max-width: 1280px) {
.slajder_sekcija .img-box img {
height: auto;
width: 100%;
}
.slajder_sekcija .detalji-box h2 {
font-size: 4.5rem;
}
}
#media (max-width: 992px) {
.slajder_sekcija .detalji-box h2 {
font-size: 3.5rem;
}
.slajder_sekcija .detalji-box h3 {
font-size: 2rem;
}
.slajder_sekcija .carousel-control-prev {
top: 15px;
}
.slajder_sekcija .carousel-control-next {
bottom: 75px;
}
}
#media (max-width: 769px) {
.omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #1d1e31 45%);
}
.sub_page .omotac {
background: linear-gradient(to bottom, #f2f7fd 50%, #f2f7fd 45%);
}
.omotac {
height: auto;
}
.meni-dugmici span {
background-color: #1d1e31;
}
.meni-dugmici_style button span {
background-color: #fff;
}
.carousel-indicators {
display: none;
}
.slajder_sekcija .img-box {
margin-top: 22.5px;
}
.slajder_sekcija .carousel-control-prev,
.slajder_sekcija .carousel-control-next {
display: none;
}
.skidanje_sekcija .main-img-box {
margin-top: 22.5px;
}
.onama_sekcija {
background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url("../slike/about-bg.jpg");
}
.onama_sekcija .detalji-box {
text-align: left;
height: auto;
}
.onama_sekcija .detalji-box.b-1 a {
margin: 0 auto;
}
.onama_sekcija .detalji-box.b-1 {
margin-bottom: 22.5px;
}
.info_sekcija .col-md-3 {
padding: 10px 12.50px;
text-align: left;
}
.contact_img-box {
margin-top: 22.5px;
}
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 500px;
}
.kol-desno {
margin: 50px 0px 0px 180px;
}
.b-3 p {
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
.b-4 p {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: #8c60bd;
}
}
#media (max-width: 576px) {
.kontakt_sekcija input {
width: 100%;
}
.info_sekcija .social-box {
width: auto;
}
}
#media (max-width: 400px) {
.slajder_sekcija .detalji-box h3 {
font-size: 1.5rem;
}
.slajder_sekcija .detalji-box h2 {
font-size: 2.5rem;
}
.pretplata_sekcija form {
flex-direction: column;
}
.pretplata_sekcija form input {
width: 100%;
height: 45px;
}
.pretplata_sekcija form .pretplataDugme {
width: 150px;
height: 45px;
line-height: 45px;
margin-top: 25px;
}
}
#media (max-width: 376px) {
.kol-levo {
float: none;
display: block;
margin: 0 auto;
width: 250px;
padding: 0;
}
.kol-desno {
margin: 50px 0px 0px 50px;
padding: 0;
}
.b-3 p {
padding-top: 10px;
color: #FFF;
font-size: 17px;
}
.b-4 p {
margin-top: 20px;
color: #FFF;
font-size: 17px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Abdans - Kontakt</title>
<!-- slajder css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<!-- Header deo -->
<div class="omotac">
<header class="header_sekcija">
<div class="sekcija">
<nav class="navbar navbar-prosirenje navigacija-sekcija">
<div class="navbar-vracanje">
<div class="meni-dugmici">
<button id="dugmeNav">
<span class="s-1"> </span>
<span class="s-2"> </span>
<span class="s-3"> </span>
</button>
</div>
<div id="myNav" class="overlay">
<div class="overlay-sadrzaj">
POČETNA
O NAMA
ISKUSTVA KORISNIKA
KONTAKT
</div>
</div>
</div>
</nav>
<a class="navbar-logo" href="index.html">
<h1>
ABDANS
</h1>
</a>
</div>
</header>
<!-- Zavrsava se header deo -->
<!-- kontakt -->
<section class="kontakt_sekcija padding">
<div class="container">
<div class="d-flex ">
<h2 id="kontaktnaslov">
Kontaktirajte nas
</h2>
</div>
<div class="row">
<div class="col-md-6">
<form action="kontakt.php" method="get">
<div class="kontakt_form-container">
<div>
<div>
<input type="text" placeholder="Ime">
</div>
<div>
<input type="text" placeholder="Broj telefona">
</div>
<div>
<input type="email" placeholder="Email">
</div>
<div class="mt-5">
<input type="text" placeholder="Poruka">
</div>
<div class="mt-5">
<input type="submit" value="pošalji" id="posaljiDugme">
</div>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<div class="contact_img-box">
<img src="slike/contact-img.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- zavrsavaju se kontakti -->
<!-- info -->
<section class="info_sekcija padding-top">
<div class="info_logo-box">
<h3>
ABDANS
</h3>
</div>
<div class="container padding2">
<div class="row">
<div class="col-md-3">
<h4>
O nama
</h4>
<p>
Firma se bavi prodajom BIO prehrambenih proizvoda.
</p>
</div>
<div class="col-md-3">
<h4>
Korisni linkovi
</h4>
<ul>
<li>
<a href="http://www.organiccentar.rs/prednosti/sta-organski-proizvodi.html">
Šta je BIO proizvod ?
</a>
</li>
<li>
<a href="#">
Kako preuzeti aplikaciju ?
</a>
</li>
<li>
<a href="onama.html">
O nama
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h4>
Kontaktirajte nas
</h4>
<p>
Kontaktirajte nas na svim društvenim mrežama, klikom na ikonicu ispod.
</p>
</div>
<div class="col-md-3">
<div class="pretplata_container">
<h4>
Newsletter
</h4>
<div class="form_container">
<form action="pretplata.php" method="post">
<input type="email" placeholder="Upišite vaš email" id="preplata_provera">
<input type="submit" value="Pretplati se" class="pretplataDugme">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mreze_container">
<div class="social-box">
<a href="#">
<img src="slike/fb.png" alt="">
</a>
<a href="#">
<img src="slike/twitter.png" alt="">
</a>
<a href="#">
<img src="slike/linkedin.png" alt="">
</a>
<a href="#">
<img src="slike/instagram.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- zavrsava se info -->
<!-- footer -->
<footer class="sekcija footer_sekcija">
<p>
© 2022 Sva prava zadržana. Napravljen od strane
Nikole Tešića
</p>
</footer>
<!-- zavrsava se footer -->
<!-- javasript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/reset.js"></script>
<script src="js/navigacija.js"></script>
</div>
</body>
</html>
Thanks in regards.

Try width: 100vw; in the body element(or the element that have background color)

space issue in html/css

I have the following short and concise code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iframe. The first corner of the blog card should be right under the first corner of the iframe.
Expected Output
How would I modify the css to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions?

Make both parent div of the iframe and div having class .square of the same width to achieve this
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1,.resume-item {
display: flex;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-right: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1000px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Contact form sending message to specified address

I was wondering how would I be able to send the message entered from the form box above, to a specific email address, while using the users entered email as the sending address? Is this possible to accomplish through html or would I have to use some sort of JavaScript to accomplish this? Anything helps and thanks in advance!
<script>
const inputs = document.querySelectorAll(".input");
function focusFunc() {
let parent = this.parentNode;
parent.classList.add("focus");
}
function blurFunc() {
let parent = this.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", focusFunc);
input.addEventListener("blur", blurFunc);
});
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
#font-face { font-family: Raleway; src: url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
input,
textarea {
font-family: Raleway;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
padding: 2rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.form {
width: 100%;
max-width: 820px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-form {
background-color: #3A81B4;
position: relative;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #2d6a96);
position: absolute;
}
.circle.one {
width: 130px;
height: 130px;
top: 130px;
right: -40px;
}
.circle.two {
width: 80px;
height: 80px;
top: 10px;
right: 30px;
}
.contact-form:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
background-color: #3A81B4;
transform: rotate(45deg);
top: 50px;
left: -13px;
}
form {
padding: 2.3rem 2.2rem;
z-index: 10;
overflow: hidden;
position: relative;
}
.title {
color: #fff;
font-weight: 500;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0.7rem;
}
.input-container {
position: relative;
margin: 1rem 0;
}
.input {
width: 100%;
outline: none;
border: 2px solid #fafafa;
background: none;
padding: 0.6rem 1.2rem;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: 7px;
transition: 0.3s;
}
textarea.input {
padding: 0.8rem 1.2rem;
min-height: 150px;
border-radius: 7px;
resize: none;
overflow-y: auto;
}
.input-container label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
padding: 0 0.4rem;
color: #fafafa;
font-size: 0.9rem;
font-weight: 400;
pointer-events: none;
z-index: 1000;
transition: 0.5s;
}
.input-container.textarea label {
top: 1rem;
transform: translateY(0);
}
.btn {
padding: 0.6rem 1.3rem;
background-color: #fff;
border: 2px solid #fafafa;
font-size: 0.95rem;
color: #1880c9;
line-height: 1;
border-radius: 25px;
outline: none;
cursor: pointer;
transition: 0.3s;
margin: 0;
}
.btn:hover {
background-color: transparent;
color: #fff;
}
.input-container span {
position: absolute;
top: 0;
left: 25px;
transform: translateY(-50%);
font-size: 0.8rem;
padding: 0 0.4rem;
color: transparent;
pointer-events: none;
z-index: 500;
}
.input-container span:before,
.input-container span:after {
content: "";
position: absolute;
width: 10%;
opacity: 0;
transition: 0.3s;
height: 5px;
background-color: #3A81B4;
top: 50%;
transform: translateY(-50%);
}
.input-container span:before {
left: 50%;
}
.input-container span:after {
right: 50%;
}
.input-container.focus label {
top: 0;
transform: translateY(-50%);
left: 25px;
font-size: 0.8rem;
}
.input-container.focus span:before,
.input-container.focus span:after {
width: 50%;
opacity: 1;
}
.contact-info {
padding: 2.3rem 2.2rem;
position: relative;
}
.contact-info .title {
color: #1880c9;
}
.text {
color: #333;
margin: 1.5rem 0 2rem 0;
}
.information {
display: flex;
color: #555;
margin: 0.7rem 0;
align-items: center;
font-size: 0.95rem;
}
.icon {
width: 28px;
margin-right: 0.7rem;
}
.social-media {
padding: 2rem 0 0 0;
}
.social-media p {
color: #333;
}
.social-icons {
display: flex;
margin-top: 0.5rem;
}
.social-icons a {
width: 35px;
height: 35px;
border-radius: 5px;
background: linear-gradient(45deg, #3A81B4, #2d6a96);
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 0.5rem;
transition: 0.3s;
}
.social-icons a:hover {
transform: scale(1.05);
}
.square {
position: absolute;
height: 400px;
top: 50%;
left: 50%;
transform: translate(181%, 11%);
opacity: 0.2;
}
#media (max-width: 850px) {
.form {
grid-template-columns: 1fr;
}
.contact-info:before {
bottom: initial;
top: -75px;
right: 65px;
transform: scale(0.95);
}
.contact-form:before {
top: -13px;
left: initial;
right: 70px;
}
.square {
transform: translate(140%, 43%);
height: 350px;
}
.big-circle {
bottom: 75%;
transform: scale(0.9) translate(-40%, 30%);
right: 50%;
}
.text {
margin: 1rem 0 1.5rem 0;
}
.social-media {
padding: 1.5rem 0 0 0;
}
}
#media (max-width: 480px) {
.container {
padding: 1.5rem;
}
.contact-info:before {
display: none;
}
.square,
.big-circle {
display: none;
}
form,
.contact-info {
padding: 1.7rem 1.6rem;
}
.text,
.information,
.social-media p {
font-size: 0.8rem;
}
.title {
font-size: 1.15rem;
}
.social-icons a {
width: 30px;
height: 30px;
line-height: 30px;
}
.icon {
width: 23px;
}
.input {
padding: 0.45rem 1.2rem;
}
.btn {
padding: 0.45rem 1.2rem;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
</head>
<body>
<div class="container">
<span class="big-circle"></span>
<img class="square" alt="" />
<div class="form">
<div class="contact-info">
<h3 class="title">Let's get <b>in touch</b></h3>
<p class="text">
Feel free to send us an email with any inquiries; one of our receptionists will reach out to you as sson as possible.
</p>
<div class="info">
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/location.png " class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/email.png" class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/phone.png" class="icon" alt="" />
<p></p>
</div>
</div>
<div class="social-media">
<p>Connect with us :</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="contact-form">
<span class="circle one"></span>
<span class="circle two"></span>
<form action="index.html" autocomplete="off">
<h3 class="title">Contact us</h3>
<div class="input-container">
<input type="text" name="name" class="input" />
<label for="">Username</label>
<span>Username</span>
</div>
<div class="input-container">
<input type="email" name="email" class="input" />
<label for="">Email</label>
<span>Email</span>
</div>
<div class="input-container">
<input type="tel" name="phone" class="input" />
<label for="">Phone</label>
<span>Phone</span>
</div>
<div class="input-container textarea">
<textarea name="message" class="input"></textarea>
<label for="">Message</label>
<span>Message</span>
</div>
<input type="submit" value="Send" class="btn" />
</form>
</div>
</div>
</div>
</body>
</html>

yes just use some link like this for in html to send an email:
<a id="email-link" href="mailto:email#example.com?cc=secondemail#example.com, anotheremail#example.com, &bcc=lastemail#example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>
and you can make it change when user change the box message:
function changeLinkHref(){
let message_content = document.getElementById("message-text-area").value;
let name = document.getElementById("name-input").value;
document.getElementById("email-link").href = "mailto:yourmail#yourdomain.zone?&subject=subject&body=" + name + "%0A" + message_content ;
}
and call the function when text-area and text input get changed.
in a tag href attribute body section you can append your email text with htmlEncodedNewLine (%0A)

How do I fix unwanted side scrollbar? [duplicate]

This question already has answers here:
DISABLE the Horizontal Scroll [closed]
(12 answers)
Closed 3 years ago.
So I'm back with my website, but this time a new problem has risen...
Now I was working with my website putting contents in since i had my layout only to realize there is a unnecessary side scroll bar. I really don't know what's causing it and it's just frustrating.
I tried retracing back my step but I couldn't find it.
note... anything that says bar is just a progress bar.
https://glitch.com/~triangular-trouser
var move1 = function() {}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.m-scene {
.scene_element {
animation-duration: .5s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
.scene_element--fadein {
animation-name: fadeIn;
}
.scene_element--fadeinup {
animation-name: fadeInUp;
}
.scene_element--fadeinright {
animation-name: fadeInRight;
}
&.is-exiting {
.scene_element {
animation-direction: alternate-reverse;
}
}
}
* {
box-sizing: border-box;
}
body {
font-family: "Times New Roman", Times, serif;
padding: 0px;
background: #ffffff;
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.fullcolumn {
float: left;
width: 100%;
font-family: "Times New Roman", Times, serif;
background-color: #d7cec7;
}
.leftcolumn {
float: left;
width: 25%;
font-family: "Times New Roman", Times, serif;
margin-left: 10px;
background-color: #d7cec7;
}
.rightcolumn {
float: right;
width: 75%;
font-family: "Times New Roman", Times, serif;
margin-left: -10px;
background-color: #d7cec7;
}
.fakeimg {
background-color: #aaa;
width: 50%;
height: px;
padding: 20px;
border-radius: 5px;
}
.card {
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.picalignment {
float: left;
width: 50%;
padding: 5px;
}
.next::after {
content: "";
clear: both;
display: table;
}
.imgfix {
overflow: auto;
}
.imgfix::after {
content: "";
clear: both;
display: table;
}
.mybiopic {
float:left;
margin: 10px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#myDiv {
transition: background-color .5s;
}
#myDiv4 {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#myProgress1 {
width: 100%;
background-color: #ffffff;
}
#myBar1 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress2 {
width: 100%;
background-color: #ffffff;
}
#myBar2 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress3 {
width: 100%;
background-color: #ffffff;
}
#myBar3 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress4 {
width: 100%;
background-color: #ffffff;
}
#myBar4 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress5 {
width: 100%;
background-color: #ffffff;
}
#myBar5 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress6 {
width: 100%;
background-color: #ffffff;
}
#myBar6 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
#myProgress7 {
width: 100%;
background-color: #ffffff;
}
#myBar7 {
width: 10%;
height: 30px;
background-color: #C09F80;
text-align: center;
line-height: 30px;
color: white;
}
.filler {
background-color: #d7cec7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thimble Sample</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
</html>
<html>
<div id="myDiv" class="m-scene">
<div id="main" class="m-aside scene_element scene_element--fadein">
<body onload="move1()" id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Menu</span>
<h1>Digital Portfolio</h1>
<p style="text-align: right;">Taewoo Hong</p>
</div>
<div class="filler row m-right-panel m-page scene_element scene_element--fadeinright" id="filler">
<div class="leftcolumn">
<div class="card" id="myDiv4">
<h1 style="color: #76323F;">
<b>Skills</b>
</h1>
<h2 style="color: #ffffff;">
Adaptability
</h2>
<div id="myProgress1">
<div id="myBar1">10%</div>
</div>
<h2 style="color: #ffffff;">
Leadership
</h2>
<div id="myProgress2">
<div id="myBar2">10%</div>
</div>
<h2 style="color: #ffffff;">
Coding
</h2>
<div id="myProgress3">
<div id="myBar3">10%</div>
</div>
<h2 style="color: #ffffff;">
Art
</h2>
<div id="myProgress4">
<div id="myBar4">10%</div>
</div>
<h1 style="color: #76323F;">
<b>Languages</b>
</h1>
<h2 style="color: #ffffff;">
English
</h2>
<div id="myProgress5">
<div id="myBar5">10%</div>
</div>
<h2 style="color: #ffffff;">
Korean
</h2>
<div id="myProgress6">
<div id="myBar6">10%</div>
</div>
<h2 style="color: #ffffff;">
German(basic)
</h2>
<div id="myProgress7">
<div id="myBar7">10%</div>
</div>
</div>
</div>
<div class="rightcolumn">
<div class="card" id="myDiv5">
<h1 style="color: #76323F; text-align:right;">
<b>Contact Information</b>
</h1>
</div>
</div>
</div>
<div class="footer m-right-panel m-page scene_element scene_element--fadeinright" id="foot">
<h2>Footer</h2>
</div>
<div id="mySidenav" class="sidenav">
×
Home
Test
Clients
Contact
</div>
</body>
</div>
</div>
</html>

There's an extra negative margins on both sides of this div:
<div class="row m-page scene_element scene_element--fadeinup">
Removing both said margins from the row class seems to do the trick:
.row {
margin-left: 0;
margin-right:0;
}
You can create a class like Bootstrap 4:
.mx-0 {
margin-left: 0;
margin-right:0;
}

The scroll bars are called overflow, you can play around with it, even disable it directly. X and Y overflow for the x and y axis respectively. Have a look at this link fam, there may also be some other useful things for you there.
.someDiv{
overflow-x: hidden;
overflow-y: hidden;
}

"Contact Me" Button won't get smaller when page is resized

All the other elements of the page seem to resize whenever i make the window smaller, but it seems like the "Contact Me" Button seems to disappear whenever i resize the page, I've been trying to fix this problem for a while by changing the position of the button by itself, but it seems like nothing I've been doing has fixed the problem yet. Any help would be awesome thanks!
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type= "text/css" href="css/style.css">
<title>Jaylen Cooper</title>
<body>
<div class="image_one" id="main">
<img src="http://d2tovwv1y8kfyq.cloudfront.net/wp-content/uploads/2016/07/28105929/tech3.jpg" class="image_one">
<h1>Hello, My Name Is Jaylen Cooper, And I Develop Websites and User Interfaces</h1>
</div>
<div>
<button id="myBtn" class="myBtn" align="middle">Contact Me</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>CONTACT INFORMATION</h3>
<form>
<label for="Email">Email Address</label>
<input type="text" name="Email"/>
<label for="Info">Brief Information</label>
<input type="text" name="lName"/>
<input type="submit" value="SUBMIT">
</form>
</div>
</div>
<div class="nav_body">
<h2><b><center>My Preferences</center></b></h2>
</div>
<div>
<img src="http://pluspng.com/img-png/coder-png-source-code-icon-1600.png" height="150px" class="image_One">
<img src="https://png.icons8.com/metro/540/graduation-cap.png" height="100px" class="image_Two">
<img src="http://www.freeiconspng.com/uploads/brain-2.png" height="150px" class="image_Three">
</div>
<div class="text_display">
<p1 id="text"><b>CODE</b></p1>
</div>
<div class="third_text">
<p5 id="text2"><b><br> The Best Languages that I know right now are<br> HTML,CSS,JavaScript,<br> and a basic ammount of Python<br> and Java.</b></p5>
<p4 id="text2"><b><br> &#9867<br> I'm always looking to collaborate <br> with other developers on other project<br>If you know any other coding communities <br>Feel Free To Contact Me.</b></p4>
<p6 id="text2"><b><br> &#9867<br> The Ideas that I usually have<br> are Website Based and Mobile,<br> Want To Pursue SQL.</b></p6>
</div>
<div class="fourth_box">
<h7><b>WORK</b></h7>
</div>
<div class="fifth_box">
<img src="http://www.freepngimg.com/thumb/coming_soon/4-2-coming-soon-png-thumb.png" class="coming_soon">
</div class="third_text">
<div class="About_Me">
<h9><b><center>ABOUT ME</center></b></h9>
</div>
<div class="aboutme_box">
<p id="aboutme_text"><b>I Live In Dallas,Texas <br>&#9867</b></p>
<p id="aboutme_text"><b>I'm 19 Years Old. <br>&#9867</b></p>
<p id="aboutme_text"><b>I've Been Coding For A Year. <br>&#9867</b></p>
<p id="aboutme_text"><b>Graduated High School In 2017. <br>&#9867</b></p>
<p id="aboutme_text"><b>Attending Community College For Computer Science 2018.<br>&#9867</b></p>
<p id="aboutme_text"><b>My Favorite Color Is Blue. <br>&#9867</b></p>
<p id="aboutme_text"><b>I Love Watching Twitch On My Down Time. <br> &#9867</b></p>
<p id="aboutme_text"><b>If You Would Like To Know More About Me Shoot Me A Email.</b></p>
</div>
<div class="Hyperlink_images">
<a href="https://twitter.com/slitheirings">
<img src="http://www.freeiconspng.com/uploads/twitter-icon--basic-round-social-iconset--s-icons-0.png" class="hyperlink_one" width="100px" id="hyperlink" href="https://twitter.com/slitheirings">
</a>
<a href="https://www.instagram.com/coop2824">
<img src="http://www.freeiconspng.com/uploads/instagram-logo-icon--icon-search-engine-5.png" class="hyperlink_two" width="100px" id="hyperlink" href="https://www.instagram.com/coop2824/">
</a>
<a href="https://www.facebook.com/profile.php?id=100004979988388">
<img src="https://cdn.worldvectorlogo.com/logos/facebook-3.svg" class="hyperlink_three" width="100px" id="hyperlink" href="https://www.facebook.com/profile.php?id=100004979988388">
</a>
<a href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
<img src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" width="100px" id="hyperlink" href="https://stackoverflow.com/users/7928256/jaylen-cooper?tab=profile">
</a>
<a href="https://github.com/Slitherings">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" width="100px" id="hyperlink" href="https://image.flaticon.com/icons/svg/25/25231.svg">
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/javascript_index.js"></script>
</body>
CSS
html, body{
margin: 0;
text-align: center;
top: 100%;
}
.nav_body{
height: 100px;
}
h1{
position: absolute;
font-family: sans-serif;
font-size: 52px;
text-align: center;
padding-left: 100px;
padding-right: 100px;
color: white;
top: 250px;
}
.image_one{
position:relative;
width: 100%;
height: 1080px;
opacity: 0.85;
}
.Contact_text{
color: white;
font-size: 24px;
top: 600px;
text-decoration: none;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 750px;
padding-top: 25px;
padding-bottom: 25px;
background-color: black;
opacity: 0.5;
transition-duration: 1s;
position: absolute;
}
.Contact_text:hover{
opacity: 1.0;
color: black;
background-color: white;
}
.Information_Text{
text-decoration: none;
color: white;
font-size: 16px;
position: absolute;
top: 710px;
font-family: sans-serif;
padding-left: 100px;
padding-right: 100px;
left: 785px;
padding-top: 25px;
padding-bottom: 25px;
transition: 1s;
}
.Down_Arrow{
top: 750px;
position: absolute;
padding-left: 100px;
padding-right: 100px;
left: 490px;
}
.Main_Image{
position: absolute;
top: 70px;
padding-left: 100px;
padding-right: 100px;
left: 425px;
}
h2{
font-family: sans-serif;
font-size: 64px;
text-align: center;
}
.image_One{
padding-left: 20px;
padding-bottom: 50px;
}
.image_Two{
padding-left: 185px;
padding-bottom: 70px;
}
.image_Three{
padding-left: 170px;
top: 40px;
padding-bottom: 50px;
}
p1{
font-family:sans-serif;
text-decoration: none;
font-size: 64px;
color: white;
}
p2{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
p3{
font-family:sans-serif;
text-decoration: none;
font-size: 36px;
color: white;
}
.text_display{
display: inline-block;
height: 55px;
padding-top: 25px;
background-color: cadetblue;
width: 100%;
text-align: center;
padding-bottom: 25px;
}
#text{
padding:200px;
}
.second_display{
height: 200px;
display: inline-block;
width: 100%;
}
p4{
font-family: sans-serif;
font-size: 14px;
left: 500px;
}
p5{
font-family: sans-serif;
font-size: 14px;
}
p6{
font-family: sans-serif;
font-size: 14px;
}
#text2{
}
.third_text{
display: inline-block;
padding-top: 50px;
padding-bottom: 50px;
}
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
height: 300px;
}
.prev, .next{
cursor: pointer;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8)
}
.text{
color:cadetblue;
font-size: 15px;
padding: 8px 12px;
bottom: 10px;
width: 100%;
text-align: center;
}
.numbertext{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display:inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name:fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade{
from {opacity: .4}
to {opacity: 1.0}
}
#keyframes fade{
from{opacity: .4}
to {opacity: 1.0}
}
.fourth_box{
height: 85px;
background-color: cadetblue;
padding-bottom: 150px;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -400%;
}
100%{
left: -400%;
}
}
#slider{
overflow: hidden;
max-width: 600px;
width: auto;
left: 3500px;
position: fixed;
}
#slider figure img{
width: 20%;
float: left;
}
#slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
h7{
font-size: 64px;
font-family: sans-serif;
color: white;
left: 0;
position: relative;
top: 100px;
}
.contact_background{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
top: 0;
}
.About_Me{
padding-top: 50px;
height: 100px;
background-color: cadetblue;
}
h9{
font-family: sans-serif;
font-size: 64px;
text-align: center;
color: white;
}
h10{
font-family: sans-serif;
font-size: 32px;
text-align: center;
}
.submit_button{
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
color: white;
}
.clicktoclose{
font-family: sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
}
.coming_soon{
text-align: center;
left: 500px;
}
.fifth_box{
padding-top: 100px;
padding-bottom: 100px;
}
#aboutme_text{
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
}
.aboutme_box{
padding-top: 50px;
padding-bottom: 50px;
}
.Hyperlink_images{
height: 200px;
background-color: cadetblue;
padding:100px;
}
#hyperlink{
padding:100px;
}
.Email_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.Category_text{
font-family: sans-serif;
font-size: 48px;
text-decoration: none;
font-weight: bold;
}
.myBtn{
transition:background-color 1.5s ease;
position: absolute;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
left: 850px;
}
a{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 15px;
}
.myBtn:hover{
background: cadetblue;
}
/* The Modal (background) */
.modal {
transition:background-color 1.5s ease;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
input[type=text] {
transition:background-color 1.5s ease;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
font-family: sans-serif;
}
input[type=text]:focus {
background-color: coral;
opacity: 0.5;
}
label{
font-family: sans-serif;
font-weight: bold;
font-size: 26px;
}
h3{
font-family: sans-serif;
font-weight: bold;
font-size: 48px;
color: coral;
opacity: 0.4
}
input[type=button], input[type=submit], input[type=reset] {
transition:background-color 1.5s ease;
background-color: cadetblue;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
input[type=button], input[type=submit], input[type=reset]:hover{
background-color: coral;
opacity: 0.5;
font-family: sans-serif;
font-weight: bold;
}
Javascript
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var myopacity = 0;
function MyFadeFunction() {
if (myopacity<1) {
myopacity += .075;
setTimeout(function(){MyFadeFunction()},100);
}
document.getElementById('myModal').style.opacity = myopacity;
}
MyFadeFunction();
JSFiddle
Click if you want to see in browser
Again, any help would be great and it would really help me in the development of my portfolio website, I've been stuck on this problem for a while now. Thanks!

Nevermind, figured out the answer by readings Ben Kolya Mansleys, and Sergiu Post.
Thank you both for the help.
For Anyone That is wondering what i did
.myBtn{
transition:background-color 1.5s ease;
position: relative;
background: coral;
padding: 1em 5em;
color: #fff;
border:0;
bottom: 410px;
align-items: center;
justify-content: center;
}
HTML
<div style="width:100%; height: 100%">
<button id="myBtn" class="myBtn" align="middle"><a href="#">Contact
Me</a></button>
</div>
Simply put the button inside a div then and styled it with width and height, and added align-items and justify-content centered in CSS.
Again Thanks Ben and Sergiu!

You are pushing the button off of the page with this:
.myBtn {
left: 850px;
}
You could try changing that line to something like this (adjust as necessary):
left: calc(110px + 8em);