We Keep Coding

pop up screen when click on image

I am doing a personal profile page, with some conclusion of projects I did. I plan to list those projects as images, when I click on that image there will be a screen pop up with simple summary and link to my source code.
My work done:
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
html {
scroll-behavior: smooth;
}
#SelfProject {
margin-top: 100%;
padding-bottom: 25%;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
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.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
:root{
--color-primary: #191d19;
--color-secondary: #27AE60;
--color-white: #FFFFFF;
--color-black: #000;
--color-grey0: #f8f8f8;
--color-grey-1: #dbe1e8;
--color-grey-2: #b2becd;
--color-grey-3: #6c7983;
--color-grey-4: #454e56;
--color-grey-5: #2a2e35;
--color-grey-6: #12181b;
--br-sm-2: 14px;
--box-shadow-1: 0 3px 15px rgba(0, 0, 0, .3);
}
body{
background-color:#E0FFFF;
font-size: 1.1rem;
color: var(--color-grey-4);
font-family: 'Vazirmatn', sans-serif;
transition: all .4s ease-in-out;
}
a{
display: inline-block;
text-decoration: none;
color: inherit;
font-family: inherit;
}
header{
height: 100vh;
color: var(--color-white);
overflow: hidden;
}
h1{
text-align: center;
}
.section{
transform: translateY(-100%) scale(0);
transition: all .4s ease-in-out;
background-color: var(--color-primary);
}
.sec1{
display: none;
transform: translateY(0) scale(1);
background-color: rgba(38, 95, 228, 0.849);
}
.active {
display: block;
animation: scaleAnim is ease-in-out;
#keyframes scaleAnim{
0%{
transform: translateY(-100%) scaleY(0)
}
100%{
transform: translateY(0) scaleY(1)
}
}
}
/* Controls */
.buttons{
position: fixed;
z-index: 10;
top: 50%;
right: 3%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateY(-50%);
}
.button:hover {
background-color: #4CAF50;
color: white;
}
.button{
padding: 1rem;
cursor: pointer;
background-color: var(--color-grey0);
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: .7rem 0;
box-shadow: var(--box-shadow-1);
}
/* Header content */
.header-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100%;
}
.h-shape{
transition: all .4s ease-in-out;
width: 65%;
height: 100%;
background-color: var(--color-secondary);
position: absolute;
left: 0;
top: 0;
z-index: -1;
clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);
}
/*
.image{
border-radius: var(--br-sm-2);
height: 100%;
width: 65%;
margin-left: 4rem;
transition: all .4s ease-in-out;
}
*/
img{
width: 50%;
height:50%;
object-fit: cover;
transition: all .4s ease-in-out;
}
.column {
float: left;
width: 45%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column{
width: 100%;
}
}
.white-box {
background-color: white;
color:#000;
text-align: center;
width: 80%;
}
.right-header{
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 18rem;
}
.right-content{
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 18rem;
}
.name{
font-size: 3rem;
}
span{
color: var(--color-secondary);
}
p{
margin: 1.5rem 0;
line-height: 2rem;
}
/* Independent component */
/* download CV button */
.btn-con{
display: flex;
align-self: flex-start;
}
.main-btn{
border-radius: 30px;
color: inherit;
font-weight: 600;
position: relative;
border: 1px solid var(--color-secondary);
display: flex;
align-self: flex-start;
display: flex;
align-items: center;
overflow: hidden;
}
.btn-text{
padding: 0 2rem;
}
/* Cannot show download pic after adding this */
.btn-icon{
background-color: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 1rem;
}
h2{
position: relative;
text-transform: uppercase;
font-size: 4rem;
font-weight: 400;
}
span{
color: var(--color-secondary);
}
.bg-text{
position: absolute;
top: 50%;
left: 50%;
color: var(--color-grey-5);
transition: all .4s ease-in-out;
z-index: -1;
transform: translate(-50%, -50%);
font-weight: 800;
font-size: 6.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" , initial-scale="1.0">
<title>Projects</title>
<link rel="stylesheet" href="css/ImageModel.css">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="header">
<div class="buttons">
<button class="button control-1" id="home" onclick="javascript:location.href='index.html'">Home
<i class="fas fa-home"></i>
</button>
<button class="button control-2" id="about" onclick="javascript:location.href='aboutMe.html'">About Me
<i class="fas fa-user"></i>
</button>
<button class="button control-3" id="portfolio" onclick="javascript:location.href='portfolio.html'">Exp
<i class="fas fa-briefcase"></i>
</button>
<button class="button control-4" id="project" onclick="javascript:location.href='project.html'">Projects</button>
<button class="button control-5" id="contact" onclick="javascript:location.href='contact.html'">Contact
<i class="fas fa-envelope-open"></i>
</button>
</div>
</div>
<h1><span>Projects</span><span class="bg-text"></span></h1>
<p>Here are some of my passion projects as well as class projects! </p>
<p>enjoy analyzing sports, social media, and food-related data. I have also done game designing and privacy-related research.</p>
<p>Please feel free to shoot me an email to discuss or give ideas to any of the projects listed below!</p>
<div class="row">
<div class="column">
<div class="btn-con">
School Projects
</div>
</div>
<div class="btn-con">
Personal Projects
</div>
</div>
<div id="SchoolProject">
<h1><span>School Projects </span></h1>
<img id="myImg" src="images/timetablingSystem.png" alt="Timetabling System" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<div id="PersonalProject">
<h1><span>Personal Projects </span></h1>
</div>
</div>
</body>
</html>
The image can be shown in the school project section, however, I am unable to click it. I am doing something like this
Any help would be great, thanks in advance! :)

You are not linking your JavaScript in your HTML file
Just add it before the closing body tag:
<script src="main.js"></script>
replace main.js with your JavaScript file name.

change color when class have changed to 'open'

I made a hamburger menu with a class of .hamburger (inside .hamburger, there is a three .line classes)
shown hamburger menu
When I click a hamburger menu, class .nav-links pops up and class name changes to .nav-links .open when I inspect.
My problem is that opened .nav-links color is same as a color I gave to the hamburger menu.
but it disappears as they both have a same color
So I tried to change a hamburger menu(with a class .line) color when class .nav-links change to .nav-links .open but fail to figure out the solution.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>

Ok, try this out.
What I did was get all the line elements, toggled open on them, for which I added a .line.open bit in the CSS which paints them white.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
const hamLines = document.querySelectorAll(".line");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
hamLines.forEach(link => {
link.classList.toggle('open');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
.line.open {
background-color: white;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>

How do I center my buttons on my website?

I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>

Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}

You need to add this to your button selector:
.button {
transform: translateX(-50%);
}

On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.

Why is HTML layout breaking at 769px?

I am writing a basic web page template with html/css. The navigation's code is done from following a tutorial.
At 769px the layout breaks, the page is not full width, being hidden. As follows:
Screenshot: https://imgur.com/a/QfjrbP8
Why is the layout breaking, I've looked at the navigation code? i can't find the issue, help! Please check 769px.
$("#toggle").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
html {
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
}
body {
font-size: 2.2rem;
}
.sec {
padding: 2.2rem;
}
/*
Navigation
*/
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content h1 {
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
}
nav {
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
}
nav #brand {
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
}
nav #brand a {
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
}
nav #menu {
float: left;
left: 50%;
position: relative;
}
nav #menu li {
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
}
nav #menu li a {
color: #fff;
font-family: "Poppins";
font-weight: 200;
}
#toggle {
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#toggle .span {
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
}
#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}
#resize {
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
}
#resize #menu {
height: 90px;
display: table-cell;
vertical-align: center;
}
#resize #menu li {
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
#resize li:nth-child(1) {
margin-top:140px;
}
#resize #menu li a {
color: #fff;
}
#resize.active {
visibility: visible;
opacity: 0.99;
}
#media(max-width: 768px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
}
nav #brand {
margin-left: 18px;
}
#menu a {
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
}
nav #menu {
display: none;
}
}
#media(min-width: 768px) {
#resize {
visibility: hidden !important;
}
}
/*
Hero Section
*/
.hero-wrap {
background-color: #b072d4;
color:#ffffff;
height: 100vh;
}
#hero-icon {
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
}
#hero-icon button {
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
}
.hero-wrap h1 {
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
}
.hero-wrap h2 {
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
}
/*
SECTION 1
*/
.section-1 {
display: flex;
flex-direction:column-reverse;
text-align: center;
}
.sec1-row {
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
}
.section1-images {
width: 50%;
}
.row-content {
font-size: 1.6rem;
padding: 2rem 1rem;
}
/*
Section 2
*/
.section-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
}
.section-2 .icon-img {
width: 50%;
}
.icon-box {
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
}
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
Brand
</span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

nav #menu {
float: right;
/* float: left;
left: 50%;
position: relative; */
}
Updated the above code.
Please remove position: relative; and Left: 50%. Instead of float: left you can use float: right to align on the right side
$("#toggle").click(function() {
$(this).toggleClass('on');
$("#resize").toggleClass("active");
});
html {
font-size: 10px;
font-family: 'Courier New', 'Courier', 'monospace';
}
body {
font-size: 2.2rem;
}
.sec {
padding: 2.2rem;
}
/*
Navigation
*/
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
width: 100%;
height: 100vh;
background: url(Hero.jpg) no-repeat 50% 50%;
background-size: cover;
display: table;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content h1 {
color: #fff;
font-family: "Poppins";
font-weight: 200;
font-size: 40px;
}
nav {
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;
}
nav #brand {
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;
}
nav #brand a {
color: #fff;
transition: all 0.3s ease-out;
font-family: "Poppins";
font-weight: 300;
}
nav #menu {
float: right;
/* float: left;
left: 50%;
position: relative; */
}
nav #menu li {
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;
}
nav #menu li a {
color: #fff;
font-family: "Poppins";
font-weight: 200;
}
#toggle {
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#toggle .span {
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;
}
#toggle.on #one {
transform: rotate(45deg) translateX(2px) translateY(4px);
}
#toggle.on #two {
opacity: 0;
}
#toggle.on #three {
transform: rotate(-45deg) translateX(8px) translateY(-10px);
}
#resize {
z-index: 1;
top: 0px;
position: absolute;
background: #000;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
display: table;
}
#resize #menu {
height: 90px;
display: table-cell;
vertical-align: center;
}
#resize #menu li {
display: block;
text-align: center;
padding: 20px 0;
font-size: 50px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
#resize li:nth-child(1) {
margin-top:140px;
}
#resize #menu li a {
color: #fff;
}
#resize.active {
visibility: visible;
opacity: 0.99;
}
#media(max-width: 768px) {
#toggle {
visibility: visible;
opacity: 1;
margin-top: 6px;
}
nav #brand {
margin-left: 18px;
}
#menu a {
font-family: "Poppins";
font-weight: 200;
font-size: 20px;
}
nav #menu {
display: none;
}
}
#media(min-width: 768px) {
#resize {
visibility: hidden !important;
}
}
/*
Hero Section
*/
.hero-wrap {
background-color: #b072d4;
color:#ffffff;
height: 100vh;
}
#hero-icon {
position: absolute;
top: 34.5rem;
opacity: 0.8;
width:100%;
right:0;
background: url('hero-icon-4.png') right bottom;;
height: 300px;
background-repeat: no-repeat;
}
#hero-icon button {
opacity: 1;
padding: 1rem;
color:#fff;
font-weight: bold;
font-size: 1.6rem;
background-color: black;
border: none;
position: relative;
left: 30%;
top: 10%;
}
.hero-wrap h1 {
margin:0;
padding-left:4rem;
position: relative;
top: 10rem;
font-size: 3rem;
font-family: 'Courier New', Courier, monospace;
}
.hero-wrap h2 {
font-family: 'Courier New', Courier, monospace;
position: relative;
top: 12rem;
padding-left: 4rem;
font-size: 2rem;
}
/*
SECTION 1
*/
.section-1 {
display: flex;
flex-direction:column-reverse;
text-align: center;
}
.sec1-row {
display: flex;
flex-direction:column-reverse;
margin: 2rem 0;
}
.section1-images {
width: 50%;
}
.row-content {
font-size: 1.6rem;
padding: 2rem 1rem;
}
/*
Section 2
*/
.section-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin:auto;
background-color: #00e8ff;
}
.section-2 .icon-img {
width: 50%;
}
.icon-box {
width: 50%;
align-self: center;
text-align: center;
margin:2rem;
padding: 1rem;
background-color: #fff;
border: 10px solid #ffd434;
}
<!DOCTYPE html>
<html>
<head>
<title>TweetSentiment App</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<span id="brand">
Brand
</span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
<div id="resize">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</div>
<section class="hero-wrap sec">
<h1>
ANALYZE TWITTER DATA.
</h1>
<h2>
Search #hashtags and perform sentiment analysis.
</h2>
<div id="hero-icon">
<button>Learn More</button>
</div>
</section>
<section class="section-1 sec">
<div class="sec1-row">
<div class="row-content">
<h3>Sentiment Analysis.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br>Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img1.png" alt="image">
</div>
</div>
<div class="sec1-row">
<div class="row-content">
<h3>Data Tracking.</h3>
<article>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here. <br><br> Content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</article>
</div>
<div>
<img class="section1-images" src="img2.png" alt="image">
</div>
</div>
</section>
<section class="section-2 sec">
<div class="icon-box">
<img class="icon-img" src="icons/icon2.png" alt="icon">
<h5>HASTAGS ANALYZED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon1.png" alt="icon">
<h5>USERS SERVED</h5>
</div>
<div class="icon-box">
<img class="icon-img" src="icons/icon3.png" alt="icon">
<h5>TWEETS COMPUTED</h5>
</div>
</section>
<section class="section-3 sec">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

how to remove whitespace below div element

I have some divs and among them there's a small gap or whitespace.
I have tried changing margin top and bottom but it is not working. I think it's something to do with the image but I have not found a solution yet.
HTML
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Vizion Fitness</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "vizion.css">
</head>
<body>
<div class = "clearfix menu">
Vizion Fitness
Contact
Pricing
Trainers
Home
</div>
<div id = "header-bg">
<div id = "header-wrapper">
</div>
</div>
` <div class = "details-wrapper">
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: red;
}
p{
font-size: 16px;
}
a:link{
font-size: 16px;
text-decoration: none;
margin: 0;
padding: 0;
}
a:visited{
text-decoration: none;
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
margin: 0;
padding: 0;
}
ul, ol{
list-style-type: none;
}
::selection{
color: #fff;
background-color: #333;
}
::-moz-selection{
color: #fff;
background-color: #333;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.menu{
position:relative;
background-color: #666666;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 150;
margin-bottom: 0;
}
.logo:link{
float: left;
font-size: 28px;
color: white;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav-links:link{
float: right;
font-size: 18px;
color: white;
margin-right: 20px;
margin-top: 30px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.nav-links:hover{
color: #ff5b5b;
}
#header-bg{
position: relative;
width: 100%;
height: 590px;
margin-top: 0;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 0px;
}
#header-wrapper{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 0px;
}
/*-----------------------------------------------------DETAILS----------------------------*/
.details-wrapper{
position: relative;
width: 100%;
height: 400px;
background-color: red;
}

There is a ` character in html, which makes extra space.

You have a ` between those divs
Replace those divs with this
<div id = "header-bg">
<div id = "header-wrapper">
</div>
</div>
<div class = "details-wrapper">
</div>

remove height from #header-bg. You set 590px for the height.
https://jsfiddle.net/owmbw4x6/

Poistioning and display:flex does not well together.
If you want to use position:absolute on the flexed container apply position:absolute on #header-bg,it is because of that you have the white space
check this snippet
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: red;
}
p {
font-size: 16px;
}
a:link {
font-size: 16px;
text-decoration: none;
margin: 0;
padding: 0;
}
a:visited {
text-decoration: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li {
margin: 0;
padding: 0;
}
ul,
ol {
list-style-type: none;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: #333;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.menu {
position: relative;
background-color: #666666;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 150;
margin-bottom: 0;
}
.logo:link {
float: left;
font-size: 28px;
color: white;
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
.nav-links:link {
float: right;
font-size: 18px;
color: white;
margin-right: 20px;
margin-top: 30px;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.nav-links:hover {
color: #ff5b5b;
}
#header-bg {
position: relative;
width: 100%;
height: 590px;
margin-top: 0;
background-image: url(https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
line-height: 0px;
}
#header-bg {
position: absolute;
}
#header-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 0px;
}
/*-----------------------------------------------------DETAILS----------------------------*/
.details-wrapper {
position: relative;
width: 100%;
height: 400px;
}
<html lang="en-us">
<head>
<title>Vizion Fitness</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vizion.css">
</head>
<body>
<div class="clearfix menu">
Vizion Fitness
Contact
Pricing
Trainers
Home
</div>
<div id="header-bg">
<div id="header-wrapper">
</div>
</div>
<div class="details-wrapper">
heyllo--details wrapper
</div>
</body>
</html>
Hope it helps