We Keep Coding

How to Limit Elements on a Screen?

I have 4 boxes, (which will later be 9), in which I want there to be a total of 3 on screen at all times, excluding mobile. The remainder who are not on screen will be moved to the right end of the box line, but be unseen. I have looked around for a method to accomplish this via HTML & CSS and have found none. Is there a way to do this with HTML, CSS, or JS?
.bioSlider {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.box {
position: relative;
display: inline-block;
width: 390px;
padding: 10px;
}
.slideImage {
position: relative;
height: 300px;
}
.slideImage img {
object-fit: cover;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
opacity: 0;
transition: 0.6s ease-in-out;
}
.quoteText {
position: absolute;
text-align: left;
font-style: italic;
word-break: break-all;
padding: 30px;
top: 30px;
color: #e5e5e5;
opacity: 0;
transition: 0.6s ease-in-out;
}
.detailBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 9px;
background-color: #e8e8e8;
}
.slideImage:hover .overlay {
opacity: 50%;
}
.slideImage:hover .quoteText {
opacity: 100%;
}
<div>
<!-- Cadet Slider -->
<ul class='bioSlider'>
<li class='cadetOne'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Red_Card.png' alt=''>
<div class='overlay'> </div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
</div>
</div>
</div>
</li>
<li class='cadetTwo'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Yellow_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
</div>
</div>
</div>
</li>
<li class='cadetThree'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Blue_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
</div>
</div>
</div>
</li>
<li class='cadetFour'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Green_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
</div>
</div>
</div>
</li>
</ul>
</div>

Why do the slideshows not work (anymore)?

As you can see in my previous question, I've managed to get a slideshow working.
I wanted to put on more slideshows, unfortunately they don't work although I think I've used the same code/design.
And the original slideshow is also not working anymore :(. I got stationary slide shows now.
Can anybody see what I should do in order to get all slideshows working again?
Here's the code:
HTML
`
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div>
<img src="Img4.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img5.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img6.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div>
<img src="Img7.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img8.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img9.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div>
<img src="Img10.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img11.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img12.jpg" height="150px" width="75px">
</div>
</div>`
CSS
/* General settings */
body {
font-family: helvetica;
}
* {
font-size: 100%;
font-family: helvetica;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Starring ads */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowStarringAds {
margin: 80px auto;
position: absolute;
top: 20%;
left: 25%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#SlideshowStarringAds {
height: 300px;
width: 300px;
}
#SlideshowStarringAds > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 1 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd1 {
margin: 80px auto;
position: absolute;
top: 20%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd1 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd1 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 2 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd2 {
margin: 80px auto;
position: absolute;
top: 34%;
right: 39%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd2 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd2 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 3 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd3 {
margin: 80px auto;
position: absolute;
top: 48%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd3 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd3 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
Javascript in HTML head
<!-- Code Javascript belonging to starring ads -->
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<!-- End of Java script -->
Javascript file
Downloadable from OneDrive

Well, in your javascript, you can add:
var slideshow1 = document.getElementById("SlideshowFeaturedAd1");
slideshow1.currentSlideIndex = 1;
showSlides(slideshow1.currentSlideIndex, slideshow1);
var slideshow2 = document.getElementById("SlideshowFeaturedAd2");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
var slideshow2 = document.getElementById("SlideshowFeaturedAd3");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
function plusSlides(n, slideshow) {
showSlides(slideshow.currentSlideIndex += n, slideshow);
}
function currentSlide(n, slideshow) {
showSlides(slideshow.currentSlideIndex = n, slideshow);
}
function showSlides(n, slideshow) {
var i;
var slides = slideshow.getElementsByClassName("mySlides");
var dots = slideshow.getElementsByClassName("dot");
if (n > slides.length) {slideshow.currentSlideIndex = 1}
if (n < 1) {slideshow.currentSlideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideshow.currentSlideIndex-1].style.display = "block";
dots[slideshow.currentSlideIndex-1].className += " active";
}
Then in your CSS, you can add:
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Finally in your HTML, you can add:
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img4.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img5.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img6.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img7.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img8.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img9.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img10.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img11.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img12.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
Also, this question is similar to:
How do I make multiple slideshows in the same html document?
Since, that question has an answer to this question.

How can I keep my site/image centered when browser size shrinks?

So I am new to the front end world, and trying to get my image to stay center when I shrink the browser. How would I go about doing this? I tried a couple things but I couldn't quite get it to work. Everything looks great before I make the browser smaller. Is it a simple line in my css I need to add or is it more complicated than that?
My image
EDIT: added a screenshot of what's happening even after I do margin 0 auto. Same issue.
$(document).ready(function() {
console.log('loaded')
var weapons = [{
"name": "44_pistol",
"damage": 48,
"ammo": 150,
"fire_rate": 6,
"range": 119,
"accuracy": 66,
"weight": 4.2,
"value": 99,
},
{
"name": "10mm_pistol",
"damage": 18,
"ammo": 300,
"fire_rate": 46,
"range": 119,
"accuracy": 61,
"weight": 4.2,
"value": 53,
},
{
"name": "assault_rifle",
"damage": 30,
"ammo": 400,
"fire_rate": 40,
"range": 119,
"accuracy": 72,
"weight": 13.1,
"value": 144,
}
];
$('#pic1').on('click', function picture() {
console.log('loaded')
var pic = '44_pistol.png'
document.getElementById('pic1').src = pic.replace('90x90', '225x225');
})
$('.item-list a').on('click', function(e) {
var current_item = $(e.currentTarget).attr('class');
console.log(current_item);
for (item in weapons) {
if (weapons[item].name == current_item) {
console.log(weapons[item])
var container = $('.item-stats');
container.find('.damage').html(weapons[item].damage);
container.find('.ammo').html(weapons[item].ammo);
container.find('.fire_rate').html(weapons[item].fire_rate);
container.find('.range').html(weapons[item].range);
container.find('.accuracy').html(weapons[item].accuracy);
container.find('.weight').html(weapons[item].weight);
container.find('.value').html(weapons[item].value);
};
}
});
$('.item-list a').on('click', function(e) {
$('.item-list a').removeClass('active');
$(e.currentTarget).addClass('active');
});
});
#font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
body {
font-family: Pipboy, sans-serif;
color: #14fe17;
background-color: #292f26 !important;
}
body::after {
height: 100%;
width: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .04) 1px, transparent 1px, transparent 2px);
opacity: .3;
z-index: 1000000;
pointer-events: none;
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
}
.navbar.navbar-light::before,
.navbar.navbar-light::after {
height: 5px;
width: 2px;
content: "";
position: absolute;
display: block;
z-index: 5000;
background: #14fe17;
;
bottom: -7px;
}
.navbar::before {
left: 0px;
}
.navbar::after {
right: 0px;
}
li.navbar-item.active {
width: 230px !important;
}
ul>li.nav-item>a.nav-link,
ul>li.navbar-item.active>a.nav-link {
color: #14fe17 !important;
font-size: 32px;
line-height: 22px;
padding-bottom: 0px;
flex: 1 1 auto;
text-align: center
}
.navbar-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 26px;
top: 14px;
background: #272b23;
border-left: 2px solid;
border-right: 2px solid;
border-top: 2px solid;
left: 0px;
flex: 1 1 auto;
text-align: center
}
.navbar-light .navbar-nav>li.navbar-item.active>.nav-link {
text-align: center;
width: 100%;
margin: auto;
font-size: 32px;
line-height: 22px;
padding-bottom: 0px;
z-index: 50;
position: relative;
background: #262b23
}
.navbar-nav {
width: 100%;
}
.navbar-light ul.navbar-nav>li {
display: block;
position: relative;
width: 10%;
}
.center-image {
position: absolute;
margin-left: 360px;
object-fit: cover !important;
object-position: 50% 50% !important;
}
.center-image img {
background: transparent;
display: block;
position: relative;
max-height: 300px;
margin-top: 100px;
filter: grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
object-fit: cover !important;
object-position: 50% 50% !important;
}
#targetImg {
height: 200% !important;
width: 200% !important;
max-height: 1000px !important;
margin-top: 150px !important;
}
.pip-footer {
position: fixed;
bottom: 0;
width: calc(100% - 20px);
margin: 0px;
}
.navbar.navbar-light .navbar-nav {
margin: 0px 200px;
}
.navbar.navbar-light .navbar-nav>li {
padding: 0px 20px;
}
.nav.nav-tabs {
margin: 20px;
border-bottom: none;
}
.nav.nav-tabs>.nav-item>.nav-link:hover {
border: 1px solid transparent;
}
.nav.nav-tabs>li>a {
font-size: 26px !important;
background: transparent !important;
border: 1px solid transparent !important;
padding: 5px 10px;
}
.nav.nav-tabs>li:nth-child(2)>a {
opacity: .5;
}
.nav.nav-tabs>li:nth-child(3)>a {
opacity: .2;
}
.level-progress {
width: 100%;
height: 10px;
border: 2px solid;
display: inline-block;
width: 70%;
}
.level-progress-indicator {
height: 6px;
background: #14fe16;
position: relative;
width: 70%;
}
.navbar.navbar-light.pip-footer {
border: none;
font-size: 22px;
}
.navbar.pip-footer .col-3,
.navbar.pip-footer .col-6 {
background: rgba(16, 255, 0, 0.15);
padding: 5px 5px;
}
.navbar.pip-footer .col-6 {
margin: 0px 5px;
flex: 0 0 48%;
}
.stat-bar {
width: 60px;
margin: auto;
}
#status P {
max-width: 400px;
margin: auto;
}
.stat-bars>.row {
margin-bottom: 125px;
}
#top-stat-bar {
margin-top: 60px;
margin-bottom: 100px;
padding-top: 25px;
}
.w10 {
width: 10%;
}
.w20 {
width: 20%;
}
.w30 {
width: 30%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w70 {
width: 70%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.tab-content {
margin-right: 80px;
}
.stat-numbers {
margin-top: -75px;
}
.stat-numbers .col-1 {
background: rgba(16, 255, 0, 0.15);
margin-right: 4px;
max-width: 4%;
}
.stat-numbers .col-2 {
background: rgba(16, 255, 0, 0.15);
margin-right: 4px;
max-width: 9%;
;
}
.stat-numbers .col-1.transparent,
.stat-numbers .col-2.transparent {
background: transparent;
}
.stat-numbers img {
background: transparent;
width: 100%;
filter: grayscale(1) brightness(200) contrast(0) sepia(100%) hue-rotate(55deg) saturate(20);
}
.stat-numbers img.sm-image {
width: 17px;
margin-left: -5px;
}
.stat-numbers img.helmet-icon {
width: 80%;
margin-left: 8px;
margin-top: 5px;
}
.spacer-numbers {
width: 335px
}
#status.tab-pane.full {
width: 100%;
max-width: 100%;
}
.item-list {
float: left;
padding: 0px;
list-style: none;
margin: 0px;
}
.item-list li a {
display: block;
width: 300px;
padding: 5px 10px;
border-radius: 2px;
color: #14fe17;
padding-left: 25px;
text-decoration: none !important;
}
.item-list li a:hover {
text-decoration: none;
background: #14fe17;
color: #272b23;
}
.item-list a.active::before {
content: "";
display: block;
position: absolute;
height: 10px;
width: 10px;
background: #14fe17;
left: 25px;
margin-top: 7px;
}
.item-list a.active:hover::before {
background: #272b23;
}
.tab-pane.full {
height: calc(100vh - 180px);
}
.item-stats {
position: absolute;
right: 0px;
bottom: 50px;
width: 200px;
}
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
.item-stats .row .col-12 {
background: rgba(16, 255, 0, 0.15);
margin-bottom: 2px;
}
#pic1 {
display: block;
width: 250px;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/pipboy.app.css" />
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light ">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="navbar-item active">
STAT
</li>
<li class="nav-item">
INV
</li>
<li class="nav-item">
<a class="nav-link" href="#">DATA</a>
</li>
<li class="nav-item">
MAP
</li>
<li class="nav-item">
RADIO
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href='#status' class="nav-link" data-toggle="tab" role="tab">
STATUS
</a>
</li>
<li class="nav-item">
<a href='#special' class="nav-link" data-toggle="tab">
SPECIAL
</a>
</li>
<li class="nav-item">
<a href="#perks" class="nav-link" data-toggle="tab">
PERKS
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="status" role="tabpanel">
<div class="center-image">
<img src="vb.png" />
</div>
</div>
<div class="stat-bars">
<div class="row" id="top-stat-bar">
<div class="col-12 ">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-8">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w40" width="70%"></div>
</div>
</div>
</div>
<div class="col-0">
</div>
<div class="col-0">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w90" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w70" width="70%"></div>
</div>
</div>
</div>
<div class="col-0">
</div>
<div class="col-0">
<div class="stat-bar">
<div class="level-progress w60">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="stat-bar">
<div class="level-progress">
<div class="level-progress-indicator w30" width="70%"></div>
</div>
</div>
</div>
</div>
<div class="row stat-numbers">
<div class="spacer-numbers"></div>
<div class="col-2">
<img src="gun.png" class="img-responsive">
</div>
<div class="col-1">
<div class="icon">
<img src="crosshair.png" class="sm-image img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-1 transparent">
</div>
<div class="col-2">
<img src="helmet2.png" class=" helmet-icon img-responsive">
</div>
<div class="col-1">
<div class="icon">
<img src="energy.png" class=" energy-icon img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-1">
<div class="icon">
<img src="nuclear.png" class=" nuclear-icon img-responsive">
</div>
<div class="points">18</div>
</div>
<div class="col-2 transparent"></div>
</div>
<div class="tab-pane" id="special" role="tabpanel">
</div>
<div class="tab-pane" id="perks" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
<navbar class="navbar navbar-expand-lg navbar-light pip-footer">
<div class="container-fluid">
<div class="col-3">
HP 90/90
</div>
<div class="col-6">
<span> LEVEL 1 </span>
<div class="level-progress">
<div class="level-progress-indicator" width="70%"></div>
</div>
</div>
<div class="col-3">
AP 50/50
</div>
</div>
</navbar>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/pipboy.app.js"></script>
</body>
</html>

You can ignore your center-image function and replace center-image img with this instead and it will center on all devices. The key to this is margin:0 auto;. Which sets the left and right margins to auto.
.center-image img {
margin:0 auto;
background: transparent;
display: block;
max-height: 300px;
margin-top: 100px;
filter: grayscale(1)sepia(100%)hue-rotate(55deg)saturate(7)brightness(1)contrast(2);
}

Responsive square image and text grid

An issue has been created when min-width:768px the image and text content alignment break down!
Basically, I want to keep image and text at a time, one after another in mobile layout, and one image and related text should be aligned horizontally one after another in tablet layout, but its breakdown! The desktop layout is Okay !
Here is the code
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
float: left;
position: relative;
padding-bottom: 100%;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
</div>
</div>
</div>

I would rethink the structure, since your 8 boxes are basically 4 boxes with 2 parts in each of them. Then you can control the sequence with float left/right, like this:
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
position: relative;
padding-bottom: 100%;
}
.floatleft .s-about-col {
float:left;
}
.floatright .s-about-col {
float:right;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>

Please put this code in your CSS.
#media (max-width: 767px) {
.s-about-col{padding-bottom: 0;}
.s-about-col .s-about-col-content{position: relative;}
}

Anchors not working when header's position is fixed

I've made a header that has fixed position when I scroll. But when that happens the anchor tag stops working and all the effects as well
.buttons {
margin-left: 460px;
}
.buttons .button a i {
color: #fff;
transition: .2s;
}
.buttons .button {
float: left;
margin-left: 10px;
margin-top: 0px;
transition: .8s;
background-image: url(img/hexagon0.png);
width: 50px;
height: 50px;
cursor: pointer;
}
.buttons .button a i:hover {
color: #ff8000;
}
.buttons .button a i {
margin-top: 15px;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
z-index: -1;
}
.content {
padding: 16px;
z-index: 1;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
div.hexagons {
padding-left: 100px;
margin-top: 100px;
}
.hex i {
color: #fff;
margin-top: 45px;
transition: .5s ease;
}
.hex {
cursor: pointer;
width: 200px;
}
#hex1 {
margin-left: -300px;
}
#hex2 {
margin-left: 108px;
margin-top: -172px;
}
#hex3 {
margin-top: 60px;
margin-left: -99px;
}
#hex4 {
margin-left: 310px;
margin-top: -172px;
}
#hex5 {
margin-left: -510px;
margin-top: -175px;
}
.hex:hover i {
transform: translateY(-70px);
}
.hex .text p {
margin-top: -50px;
opacity: 0;
transition: .5s;
transform: translateY(50px);
color: #fff;
}
.hex .text p#title {
font-size: 15px;
}
.hex:hover .text p#title {
font-size: 18px;
}
.hex .text p#content {
margin-top: 0;
font-size: 15px;
}
.hex:hover .text p#content {
font-size: 15px;
}
.hex:hover .text p {
transform: translateY(0);
opacity: 1;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #2e2e2e;
margin: 57.74px 0;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 141.42px;
height: 141.42px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 29.2893px;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.hexagon:before {
top: -70.7107px;
}
.hexagon:after {
bottom: -70.7107px;
}
/*cover up extra shadows*/
.hexagon span {
display: block;
position: absolute;
top:0px;
left: 0;
width:200px;
height:115.4701px;
z-index: 2;
background: inherit;
}
.hex-img1 {
margin-left: -300px;
margin-top: -50px;
z-index: -1;
}
.hexagon-img {
position: relative;
width: 800px;
height: 461.88px;
margin: 230.94px 0;
background-image: url(img/2.jpg);
background-size: auto 912.2134px;
background-position: center;
border-left: solid 5px #ff8000;
border-right: solid 5px #ff8000;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 565.69px;
height: 565.69px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 112.16px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 790.0000px;
height: 456.1067126598044px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -282.8427px;
border-top: solid 7.0711px #ff8000;
border-right: solid 7.0711px #ff8000;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -282.8427px;
border-bottom: solid 7.0711px #ff8000;
border-left: solid 7.0711px #ff8000;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon-img:after {
content: "";
position: absolute;
top: 2.8868px;
left: 0;
width: 790.0000px;
height: 456.1067px;
z-index: 2;
background: inherit;
}
.content {
margin-top: 1000px;
}
.section-title {
background-color: #ff8000;
width: 300px;
text-align: center;
transform: rotateZ(30deg) translateY(-21px) translateX(200px);
}
.section-title p {
font-size: 50px;
color: #fff;
z-index: 1;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<center>
<div class="hexagons">
<a href="#one"><div class="hex" id="hex1">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-paint-brush" aria-hidden="true"></i>
<div class="text">
<p id="title">Grafisk Design</p>
<p id="content">Jag har jobbat i många år med Grafisk Design</p>
</div>
</span>
</div>
</div>
</a>
<a href="#two"><div class="hex" id="hex2">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-gamepad" aria-hidden="true"></i>
<div class="text">
<p id="title">Spel Skapande</p>
<p id="content">Jag älskar att jobba med speldesign och skapande</p>
</div>
</span>
</div>
</div>
</a>
<a href="#three"><div class="hex" id="hex3">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-music" aria-hidden="true"></i>
<div class="text">
<p id="title">Musik Skapande</p>
<p id="content">Jag brukar på min fritid <br> skapa musik</p>
</div>
</span>
</div>
</div></a>
<a href="#four"><div class="hex" id="hex4">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-file-text-o" aria-hidden="true"></i>
<div class="text">
<p id="title">CV</p>
<p id="content">Här kan du se mitt CV</p>
</div>
</span>
</div>
</div></a>
<a href="#four">
<div class="hex" id="hex5">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-video-camera" aria-hidden="true"></i>
<div class="text">
<p id="title">Videos</p>
<p id="content">Här postar jag min videos</p>
</div>
</span>
</div>
</div></a>
</div>
</center>
<br><br><br><br><br><br><br><br><br><br>
<div class="header" id="myHeader">
<div class="buttons">
<div class="button-hover">
<div class="button">
<i style="font-size: 17px;" class="fa fa-paint-brush" aria-hidden="true"></i>
</div>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-music" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-video-camera" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div id="one">
<div class="section-title">
<p>section 1</p>
</div>
<div class="hex-img1">
<div class="hexagon-img">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
</div>
<div id="two">
<p>section 2</p>
</div>
<div id="three">
<p>section 3</p>
</div>
<div id="four">
<p>section 4</p>
</div>
<div id="five">
<p>section 5</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
<script type="text/javascript">
$("a[href^='#']").click(function(e) {
e.preventDefault();
var position = $($(this).attr("href")).offset().top;
$("body, html").animate({
scrollTop: position
} /* speed */ );
});
</script>
</body>
</html>
So I need help to get this working on my site.
I want the header to appear when I scroll as a second menu apart from the one at the top. So it is easy to access wherever you are on the page.

<!-- Add z-index: 9 to element '.sticky' in your css -->
.buttons {
margin-left: 460px;
}
.buttons .button a i {
color: #fff;
transition: .2s;
}
.buttons .button {
float: left;
margin-left: 10px;
margin-top: 0px;
transition: .8s;
background-image: url(img/hexagon0.png);
width: 50px;
height: 50px;
cursor: pointer;
}
.buttons .button a i:hover {
color: #ff8000;
}
.buttons .button a i {
margin-top: 15px;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
z-index: -1;
}
.content {
padding: 16px;
z-index: 1;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index:9;
}
.sticky + .content {
padding-top: 102px;
}
div.hexagons {
padding-left: 100px;
margin-top: 100px;
}
.hex i {
color: #fff;
margin-top: 45px;
transition: .5s ease;
}
.hex {
cursor: pointer;
width: 200px;
}
#hex1 {
margin-left: -300px;
}
#hex2 {
margin-left: 108px;
margin-top: -172px;
}
#hex3 {
margin-top: 60px;
margin-left: -99px;
}
#hex4 {
margin-left: 310px;
margin-top: -172px;
}
#hex5 {
margin-left: -510px;
margin-top: -175px;
}
.hex:hover i {
transform: translateY(-70px);
}
.hex .text p {
margin-top: -50px;
opacity: 0;
transition: .5s;
transform: translateY(50px);
color: #fff;
}
.hex .text p#title {
font-size: 15px;
}
.hex:hover .text p#title {
font-size: 18px;
}
.hex .text p#content {
margin-top: 0;
font-size: 15px;
}
.hex:hover .text p#content {
font-size: 15px;
}
.hex:hover .text p {
transform: translateY(0);
opacity: 1;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #2e2e2e;
margin: 57.74px 0;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 141.42px;
height: 141.42px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 29.2893px;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.hexagon:before {
top: -70.7107px;
}
.hexagon:after {
bottom: -70.7107px;
}
/*cover up extra shadows*/
.hexagon span {
display: block;
position: absolute;
top:0px;
left: 0;
width:200px;
height:115.4701px;
z-index: 2;
background: inherit;
}
.hex-img1 {
margin-left: -300px;
margin-top: -50px;
z-index: -1;
}
.hexagon-img {
position: relative;
width: 800px;
height: 461.88px;
margin: 230.94px 0;
background-image: url(img/2.jpg);
background-size: auto 912.2134px;
background-position: center;
border-left: solid 5px #ff8000;
border-right: solid 5px #ff8000;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 565.69px;
height: 565.69px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 112.16px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 790.0000px;
height: 456.1067126598044px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -282.8427px;
border-top: solid 7.0711px #ff8000;
border-right: solid 7.0711px #ff8000;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -282.8427px;
border-bottom: solid 7.0711px #ff8000;
border-left: solid 7.0711px #ff8000;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon-img:after {
content: "";
position: absolute;
top: 2.8868px;
left: 0;
width: 790.0000px;
height: 456.1067px;
z-index: 2;
background: inherit;
}
.content {
margin-top: 1000px;
}
.section-title {
background-color: #ff8000;
width: 300px;
text-align: center;
transform: rotateZ(30deg) translateY(-21px) translateX(200px);
}
.section-title p {
font-size: 50px;
color: #fff;
z-index: 1;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<center>
<div class="hexagons">
<a href="#one"><div class="hex" id="hex1">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-paint-brush" aria-hidden="true"></i>
<div class="text">
<p id="title">Grafisk Design</p>
<p id="content">Jag har jobbat i många år med Grafisk Design</p>
</div>
</span>
</div>
</div></a>
<a href="#two"><div class="hex" id="hex2">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-gamepad" aria-hidden="true"></i>
<div class="text">
<p id="title">Spel Skapande</p>
<p id="content">Jag älskar att jobba med speldesign och skapande</p>
</div>
</span>
</div>
</div></a>
<a href="#three"><div class="hex" id="hex3">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-music" aria-hidden="true"></i>
<div class="text">
<p id="title">Musik Skapande</p>
<p id="content">Jag brukar på min fritid <br> skapa musik</p>
</div>
</span>
</div>
</div></a>
<a href="#four"><div class="hex" id="hex4">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-file-text-o" aria-hidden="true"></i>
<div class="text">
<p id="title">CV</p>
<p id="content">Här kan du se mitt CV</p>
</div>
</span>
</div>
</div></a>
<a href="#four"><div class="hex" id="hex5">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-video-camera" aria-hidden="true"></i>
<div class="text">
<p id="title">Videos</p>
<p id="content">Här postar jag min videos</p>
</div>
</span>
</div>
</div></a>
</div>
</center>
<br><br><br><br><br><br><br><br><br><br>
<div class="header" id="myHeader">
<div class="buttons">
<div class="button-hover">
<div class="button">
<i style="font-size: 17px;" class="fa fa-paint-brush" aria-hidden="true"></i>
</div>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-music" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-video-camera" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div id="one">
<div class="section-title">
<p>section 1</p>
</div>
<div class="hex-img1">
<div class="hexagon-img">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
</div>
<div id="two">
<p>section 2</p>
</div>
<div id="three">
<p>section 3</p>
</div>
<div id="four">
<p>section 4</p>
</div>
<div id="five">
<p>section 5</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
<script type="text/javascript">
$("a[href^='#']").click(function(e) {
e.preventDefault();
var position = $($(this).attr("href")).offset().top;
$("body, html").animate({
scrollTop: position
} /* speed */ );
});
</script>
</body>
</html>

You need a higher z-index on your .sticky element.
Currently click events are not triggered on your fixed header.
And you need to add the anchors in your sticky header, otherwise the JS code, doesn't know to which section you want to scroll to. (youtube.com won't work here ;) )
You used the same anchor #four twice as well in your hexagons, so I fixed that as well.
.buttons {
margin-left: 460px;
}
.buttons .button a i {
color: #fff;
transition: .2s;
}
.buttons .button {
float: left;
margin-left: 10px;
margin-top: 0px;
transition: .8s;
background-image: url(img/hexagon0.png);
width: 50px;
height: 50px;
cursor: pointer;
}
.buttons .button a i:hover {
color: #ff8000;
}
.buttons .button a i {
margin-top: 15px;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
z-index: -1;
}
.content {
padding: 16px;
z-index: 1;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
.sticky + .content {
padding-top: 102px;
}
div.hexagons {
padding-left: 100px;
margin-top: 100px;
}
.hex i {
color: #fff;
margin-top: 45px;
transition: .5s ease;
}
.hex {
cursor: pointer;
width: 200px;
}
#hex1 {
margin-left: -300px;
}
#hex2 {
margin-left: 108px;
margin-top: -172px;
}
#hex3 {
margin-top: 60px;
margin-left: -99px;
}
#hex4 {
margin-left: 310px;
margin-top: -172px;
}
#hex5 {
margin-left: -510px;
margin-top: -175px;
}
.hex:hover i {
transform: translateY(-70px);
}
.hex .text p {
margin-top: -50px;
opacity: 0;
transition: .5s;
transform: translateY(50px);
color: #fff;
}
.hex .text p#title {
font-size: 15px;
}
.hex:hover .text p#title {
font-size: 18px;
}
.hex .text p#content {
margin-top: 0;
font-size: 15px;
}
.hex:hover .text p#content {
font-size: 15px;
}
.hex:hover .text p {
transform: translateY(0);
opacity: 1;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #2e2e2e;
margin: 57.74px 0;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 141.42px;
height: 141.42px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 29.2893px;
box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.hexagon:before {
top: -70.7107px;
}
.hexagon:after {
bottom: -70.7107px;
}
/*cover up extra shadows*/
.hexagon span {
display: block;
position: absolute;
top:0px;
left: 0;
width:200px;
height:115.4701px;
z-index: 2;
background: inherit;
}
.hex-img1 {
margin-left: -300px;
margin-top: -50px;
z-index: -1;
}
.hexagon-img {
position: relative;
width: 800px;
height: 461.88px;
margin: 230.94px 0;
background-image: url(img/2.jpg);
background-size: auto 912.2134px;
background-position: center;
border-left: solid 5px #ff8000;
border-right: solid 5px #ff8000;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 565.69px;
height: 565.69px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 112.16px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 790.0000px;
height: 456.1067126598044px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
transform: rotate(45deg) scaleY(1.7321) translateY(-228.0534px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -282.8427px;
border-top: solid 7.0711px #ff8000;
border-right: solid 7.0711px #ff8000;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -282.8427px;
border-bottom: solid 7.0711px #ff8000;
border-left: solid 7.0711px #ff8000;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon-img:after {
content: "";
position: absolute;
top: 2.8868px;
left: 0;
width: 790.0000px;
height: 456.1067px;
z-index: 2;
background: inherit;
}
.content {
margin-top: 1000px;
}
.section-title {
background-color: #ff8000;
width: 300px;
text-align: center;
transform: rotateZ(30deg) translateY(-21px) translateX(200px);
}
.section-title p {
font-size: 50px;
color: #fff;
z-index: 1;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<center>
<div class="hexagons">
<a href="#one"><div class="hex" id="hex1">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-paint-brush" aria-hidden="true"></i>
<div class="text">
<p id="title">Grafisk Design</p>
<p id="content">Jag har jobbat i många år med Grafisk Design</p>
</div>
</span>
</div>
</div></a>
<a href="#two"><div class="hex" id="hex2">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-gamepad" aria-hidden="true"></i>
<div class="text">
<p id="title">Spel Skapande</p>
<p id="content">Jag älskar att jobba med speldesign och skapande</p>
</div>
</span>
</div>
</div></a>
<a href="#three"><div class="hex" id="hex3">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-music" aria-hidden="true"></i>
<div class="text">
<p id="title">Musik Skapande</p>
<p id="content">Jag brukar på min fritid <br> skapa musik</p>
</div>
</span>
</div>
</div></a>
<a href="#four"><div class="hex" id="hex4">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-file-text-o" aria-hidden="true"></i>
<div class="text">
<p id="title">CV</p>
<p id="content">Här kan du se mitt CV</p>
</div>
</span>
</div>
</div></a>
<a href="#five"><div class="hex" id="hex5">
<div class="hexagon">
<span>
<i style="font-size: 30px;" class="fa fa-video-camera" aria-hidden="true"></i>
<div class="text">
<p id="title">Videos</p>
<p id="content">Här postar jag min videos</p>
</div>
</span>
</div>
</div></a>
</div>
</center>
<br><br><br><br><br><br><br><br><br><br>
<div class="header" id="myHeader">
<div class="buttons">
<div class="button-hover">
<div class="button">
<i style="font-size: 17px;" class="fa fa-paint-brush" aria-hidden="true"></i>
</div>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-gamepad" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-music" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="button">
<i style="font-size: 17px;" class="fa fa-video-camera" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div id="one">
<div class="section-title">
<p>section 1</p>
</div>
<div class="hex-img1">
<div class="hexagon-img">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
</div>
<div id="two">
<p>section 2</p>
</div>
<div id="three">
<p>section 3</p>
</div>
<div id="four">
<p>section 4</p>
</div>
<div id="five">
<p>section 5</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
<script type="text/javascript">
$("a[href^='#']").click(function(e) {
e.preventDefault();
var position = $($(this).attr("href")).offset().top;
$("body, html").animate({
scrollTop: position
} /* speed */ );
});
</script>
</body>
</html>