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)

Placeholder img for tabbed image gallery with JS and Breakpoint issues

I am currently in the process of making an old website responsive. I have now installed a tabbed image gallery with which I can display an image in a section with a click-action.
However, I now have the problem that if no image was clicked beforehand, no image is displayed.
I would like to have a placeholder img but I don't know how to do it with a JS function.
I also have some bugs when I change the window size.
From width: 469px and below height: 481px I have the problem that my hidden sidebar is displayed behind my pictures.
Unfortunately, I'm not sure how I can set exactly that with breakpoints so that this error is not displayed between the mobile version of the site and the desktop version.
I'm grateful for any help!
with kind regards
And sorry for the long code...
Unfortunately, I wasn't sure what might and might not be relevant.
I'm quite willing to make a small payment if these bugs can be fixed if allowed on this site.
body {
margin: 60px;
width: auto;
}
p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration: underline;
}
a:hover {
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-decoration: none;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #999999;
padding: 8px;
text-decoration: none;
list-style-type: none;
line-height: 0.7em;
font-weight: 500;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
.figure {
margin: 0;
}
.figure img {}
.figure figcaption {
margin-left: 10px;
}
.figure figcaption a {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.caption p {
color: #999999;
font-size: 13px;
text-decoration: none;
}
caption {
text-decoration: none;
}
#media screen and (max-width: 768px) {
body {
margin: 20px;
}
div.content {
margin-left: 0;
}
div.preview {
margin-left: 0;
}
.caption {
text-align: center !important;
}
.containerCarousel {
margin-top: 0px;
margin-bottom: 150px;
width: 1fr;
}
}
#LP_img {
align-content: center;
margin: 0 auto;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 10%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 40px;
}
#media screen and (max-height: 480px) {
body {
margin: 20px;
}
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 20px;
top: 15px;
right: 35px;
}
.content {
margin-top: 10px !important;
}
.preview {
margin-top: 10px !important;
}
.caption {
text-align: center !important;
}
}
::-moz-selection {
color: white;
background: rgb(236, 101, 159);
;
}
::selection {
color: white;
background: rgb(236, 101, 159);
;
}
/* TEST gallery */
.column {
float: left;
width: 25%;
padding: 20px;
margin-top: 300px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.img-thumbnail-desktop {
width: 70px;
}
.img-thumbnail-mobile {
max-width: 40px;
}
#expandedImg {
max-height: 800px;
margin: auto 0;
}
<!doctype html>
<html lang="en">
<head>
<title>Christoph Urwalek</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<!-- START Mobile Nav-->
<div id="myNav" class="overlay">
×
<div class="overlay-content">
painting
drawing
collage
video
current
text
biography
contact
</div>
</div>
<!-- END Mobile Nav-->
<span class="d-xl-none" style="font-size:30px;cursor:pointer; color: #4d4d4d;" onclick="openNav()">☰ <font size="-1"><b>Christoph Urwalek</b></font></span>
<!--START Wrapper-->
<div class="container-fluid my-container align-items-center">
<!--START Sidebar -->
<div class="row my-row">
<div class="col-md-3 ">
<nav class="sidebar-header sidebar">
<li><a class="active" href="./../index.html"><b>Christoph Urwalek</b></a></li>
<li>painting</li>
<li>drawing</li>
<li>collage</li>
<li>video</li>
<li>
<a> </a>
</li>
<li>current</li>
<li>text</li>
<li>biography</li>
<li>contact</li>
<br>
<br>
<!--START Thumbnaill Navbar-->
<img src="../../assets/img/thumbnails/Apelles_230x177cm_2020__.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../../assets/img/thumbnails/Psychologische-Raumforschung-02_.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<br>
<img src="../../assets/img/thumbnails/Auge_IV_33x33cm_2019_.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<img src="../../assets/img/thumbnails/Rote_Flagge_Wand_2019.jpg" alt="apelles" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">
<!--END Thumbnaill Navbar-->
<div>
</nav>
</div>
<!--END Sidebar -->
<!--START Wandcollage-->
<div class="col-md-9 ">
<!--main content-->
<div class="container expandedImgSize justify-content-center">
<span onclick="this.parentElement.style.display='none'"></span>
<img id="expandedImg">
<div id="imgtext">
<!--TEXT EINFÜGEN-->
</div>
</div>
</div>
<!--col-md-9-->
</div>
</div>
<!--END Wrapper-->
<script type="">
function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText
= document.getElementById("imgtext"); expandImg.src = imgs.src; //imgText.innerHTML = imgs.alt; expandImg.parentElement.style.display = "block"; }
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>

my website is ok on iphone 6/7/8 but messes up on others, how do i fix

i have used media queries to make my website suitable for iphone /6/7/8 but when i change it to iphone x in dev tools, there is some black space in the right side and the same with other devices, how do i make my website suitable for all devices, what queries do i use and what am i doing wrong?
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-400px";
}
/* MEDIA CSS */
#media screen and (max -width: 700px) {
.nav-links ul li {
display: block;
}
.nav-links {
position: fixed;
background: #ffd700;
height: 100vh;
width: 12.5em;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
}
nav .fas {
display: block;
color: black;
margin: 1.625em;
font-size: 1.375em;
cursor: pointer;
position: relative;
right: 0.6em;
}
.nav-links ul {
padding: 1em;
}
.text-box h1 {
font-size: 4.3em;
}
nav img {
width: 20em;
position: relative;
top: 0.1em;
}
.player-info p {
padding-left: 0;
font-size: 0.8em;
padding-top: 0;
}
}
/* NORMAL CSS */
* {
margin: 0;
padding: 0;
font-family: "Nunito", sans-serif;
}
#font-face {
font-family: "BatmanForeverOutline";
font-style: normal;
font-weight: normal;
src: local("BatmanForeverOutline"), url("batmfo__.woff") format("woff");
}
#font-face {
font-family: "BatmanForeverAlternate";
font-style: normal;
font-weight: normal;
src: local("BatmanForeverAlternate"), url("batmfa__.woff") format("woff");
}
body {
background-color: black;
width: 100%;
}
em {
color: #ffd700;
font-style: normal;
font-family: "Nunito", sans-serif;
}
.header {
min-height: 100vh;
min-width: 200px;
background-image: linear-gradient(
rgba(105, 105, 105, 0.7),
rgba(105, 105, 105, 0.7)
);
background-position: center;
background-size: cover;
position: relative;
}
.main-texts {
min-height: 85vh;
background-image: url(images/background.jpeg);
background-position: center;
background-size: cover;
position: relative;
border-bottom: 0.1875em solid #ffd700;
}
.menu-header {
width: 100%;
background-color: #ffd700;
min-height: 15vh;
border-bottom: 0.1875em solid #fff;
}
nav img {
width: 25em;
}
nav {
display: flex;
padding: 2% 1%;
justify-content: space-between;
align-items: center;
}
.nav-links {
flex: 1;
text-align: center;
position: relative;
right: 12.5em;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 0.5em 3.125em;
position: relative;
}
.nav-links ul li a {
color: rgb(105, 105, 105);
text-decoration: none;
font-size: 1.375em;
transition: 0.5s;
}
.nav-links ul li::after {
content: "";
width: 0%;
height: 0.1875em;
background: white;
display: block;
margin: auto;
transition: 0.5s;
position: relative;
bottom: 0.1875em;
}
.nav-links ul li:hover::after {
width: 100%;
}
.nav-links ul li a:hover {
color: white;
}
.text-box {
color: #fff;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-size: 5.625em;
font-family: "Nunito", sans-serif;
}
.text-box p {
margin: 0.625em 0 2.5em;
font-size: 1.5625em;
color: #fff;
}
.player-info {
margin: 0.625em 0 2.5em;
font-size: 1.5625em;
color: #fff;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 0.0625em solid #fff;
padding: 0.5em 1.25em;
font-size: 1.125em;
background: transparent;
border-radius: 0.1875em;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 0.0625em solid #fff;
background: #ffd700;
transition: 0.5s;
border-radius: 0.3125em;
}
nav .fas {
display: none;
}
.meet-me {
width: 80%;
text-align: center;
margin: auto;
padding-top: 6.25em;
}
.meet-me h1 {
font-size: 2.25em;
font-weight: 600;
color: #fff;
padding-bottom: 1.875em;
}
.meet-me p {
text-align: left;
padding-left: 9.375em;
}
footer {
width: 100%;
background-color: black;
height: 20.625em;
border-top: 0.3125em solid #fff;
}
.footer-headers {
text-align: center;
padding-top: 1.25em;
padding-bottom: 1.25em;
}
.footer-headers ul li {
list-style: none;
display: inline-block;
padding: 1.25em 5em;
position: relative;
}
.footer-headers ul li a {
text-decoration: none;
color: #ffd700;
font-size: 1.125em;
transition: 0.5s;
}
.footer-headers ul li a::after {
content: "";
width: 0%;
height: 0.1875em;
background: white;
display: block;
margin: auto;
transition: 0.5s;
position: relative;
bottom: 0.1875em;
}
.footer-headers ul li a:hover::after {
width: 100%;
}
.foot-logo img {
width: 25em;
padding-top: 0.0625em;
position: relative;
right: 1.875em;
}
.foot-logo {
text-align: center;
}
.copyright h4 {
color: #ffd700;
position: relative;
top: 0.625em;
}
.copyright {
text-align: center;
position: relative;
top: 2.5em;
}
.copyright h4 a {
text-decoration: none;
color: #ffd700;
transition: 0.5s;
}
.copyright h4 a:hover {
color: red;
}
.socials a i {
color: #ffd700;
transition: 0.5s;
}
.socials a i:hover {
color: red;
}
.socials {
text-align: center;
position: relative;
top: 1.5625em;
}
.socials i {
padding: 0.3125em 2.5em;
}
<html lang="en">
<head>
<script>
ScrollReveal({ reset: true });
</script>
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/360332bae9.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<section class="header">
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<div class="main-texts">
<div class="text-box">
<h1>Welcome To <em>LuxxMob</em></h1>
<p>An upcoming eSports team recruiting talented gamers and quality content creators.</p>
About Us
</div>
</div>
</section>
<!--NEXT SECTION MEET THE OWNER-->
<section class="meet-me">
<h1>Meet The Players</h1>
<div class="player-info">
<p>
Meet the competitive players, content creators and the owner of
LuxxMob. A rapidly growing team of highly skilled members, providing
some of the best content and gameplay available on social media
currently.
</p>
</div>
</section>
<!--FOOTER SECTION-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>&copy 2021 LuxxMob</h4>
<h4>Made with &#10084 by #truechow</h4>
</div>
</footer>

As I can see in your code, you have only used one media query, so try to add media queries by considering all sizes of devices. Please find below media queries:
#media screen and (min-width: 320px) and (max-width: 576px) {
}
#media screen and (min-width: 577px) and (max-width: 767px) {
}
#media screen and (min-width: 768px) and (max-width: 991px) {
}
#media screen and (min-width: 992px) and (max-width: 1055px) {
}
#media screen and (min-width: 992px) and (max-width: 1200px) {
}
#media screen and (min-width: 1201px) and (max-width: 1400px) {
}

CSS overflow : hidden may be helpful for you.

I am trying to make the navbar sticky but my JQuery is not adding the css class that i want to add on scroll function

Below are the HTML, CSS, and JS code in which I am facing the problem, and not able to attain the functionality that I am supposed to.
//This is where I think the prblem is but I am not able to figure out how to correct it
window(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
}
})
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
position: fixed;
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
*background: #ffffff;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="src=" https://code.jquery.com/jquery-3.5.1.min.js ""></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
While scrolling down the background of the nav-bar should turn white but it's not behaving in that way it should be behaving. What would be the easier way to attain this functionality if I am not supposed to do it this way.

Is there any problem if the navbar is always fixed?
Add background-color: white; to the .navbar class and check if that is satisfactory. This allows you to make the navbar background white and the page text goes behind the navbar on scrolling. If that satisfies you, then you can even remove the jquery code.

Try like this:
//This is where I think the prblem is but I am not able to figure out how to correct it
(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
})
})();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
background: #ffffff;
position: fixed;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Fixed HTML syntax (<script> src), JavaScript syntax (})()) and CSS syntax (background without *)
In the JavaScript, remove the class again when the condition is not met
In the CSS, set position: fixed; when the .sticky class is present, not the other way around
Look at position: sticky for a pure CSS way to do this, e.g.:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
background: #ffffff;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar sticky">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>

how to move buy button underneath drop down box?

I am trying to move a button underneath the drop down box in my product page. so that the information is presented with one information per row. I tried placing a div tag around the button to see if that be seen as a separate element that goes below the previous element but that did not work so I am lost in what to do to make the buy button to go underneath the size and 1 boxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" >
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<br>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 130%;
}
h2{
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p{
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product{
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2{
width: 100%;
height: 100%;
float: left;
}
.product-image{
/*border: 1px dotted #aaa;*/
}
.product-image .bg{
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator{
text-align:center;
}
.dot:hover{
background-color: #444;
}
.product-info{
padding: 0px 8%;
}
.product-info h1{
margin-bottom: 5px;
}
.product-info h2{
margin-bottom: 50px;
}
.product-info .select-dropdown{
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select{
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active, select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn{
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover{
background-color: #555;
}
.product-info p{
margin-bottom: 30px;
}
.product-info p a{
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover{
opacity: .7;
}
.product-info ul{
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li{
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before{
content:"\2022";
margin-right: 20px;
}
.product-info a.share-link{
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover{
border-bottom: 2px solid #aaa;
}
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
height:10%;
}

There are multiple things wrong here.
The <br> tag should not be used for element positioning. This should be strictly reserved for text.
If you don't want your elements to display a line, it's probably a good idea to not set their display property to an inline-block for starters.
There are even some syntactical errors (eg. excessive </div> tag and what not). In general, I'd recommend writing your code in some sort of linter as it has some readability issues.
I did the baremost minimum of removing the unnecessary <br> tag and added clear:both to the .Buy class formatting. Producing the desired result.
body {
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 130%;
}
h2 {
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p {
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.Buy {
clear: both;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product {
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2 {
width: 100%;
height: 100%;
float: left;
}
.product-image {
/*border: 1px dotted #aaa;*/
}
.product-image .bg {
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator {
text-align: center;
}
.dot:hover {
background-color: #444;
}
.product-info {
padding: 0px 8%;
}
.product-info h1 {
margin-bottom: 5px;
}
.product-info h2 {
margin-bottom: 50px;
}
.product-info .select-dropdown {
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select {
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active,
select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn {
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover {
background-color: #555;
}
.product-info p {
margin-bottom: 30px;
}
.product-info p a {
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover {
opacity: .7;
}
.product-info ul {
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li {
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before {
content: "\2022";
margin-right: 20px;
}
.product-info a.share-link {
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover {
border-bottom: 2px solid #aaa;
}
#footer {
width: 100%;
background-color: #222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear: both;
height: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet">
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {
plusSlides(1)
}, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>

You have <br/> tag before button, just add style to it like this
<br style="clear: both;" />
and you should be fine :)