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>

Menu-link only works on index.html and no other page

For some reason my menu link doesn't work on any other page except for the index page. I think its a problem within JavaScript but I'm not quite sure. The HTML navigation section of the page not working is the exact same as the code for index.html. Here is the CSS
.list-menu {
position: fixed;
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999999;
background: rgba(0, 0, 0, 0.9);
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
opacity: 0;
z-index: -1;
}
.list-menu.reveal-modal {
opacity: 1;
z-index: 999999;
visibility: visible;
}
.list-menu .ion-close-round {
font-size: 31px;
position: absolute;
top: 32px;
right: 32px;
color: #fff;
cursor: pointer;
}
.circle {
width: 45px;
height: 45px;
text-align: center;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
border-radius: 50%;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
cursor: pointer;
z-index:99 ;
padding: 0px 0 0;
}
.circle i {
font-size: 36px;
color: #111112;
}
.circle.dark {
border-color: #292929;
}
.circle.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.large {
height: 120px;
width: 120px;
margin-top: -60px;
margin-left: -60px;
}
.circle.large:before {
margin-top: -18px;
margin-left: -10px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 31.0px;
border-color: transparent transparent transparent #ffffff;
}
.circle.large.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.inline {
position: relative;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
display: inline-block;
z-index: 0;
}
#media all and (max-width: 1000px) {
.circle.large {
width: 90px;
height: 90px;
margin-top: -45px
;
}
.circle.large:before {
margin-top: -14px;
margin-left: -8px;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 25.0px;
border-color: transparent transparent transparent #fff;
}
}
and the JavaScript.
$(document).ready(function(){
"use strict";
$('.menu-container').each(function(index) {
$(this).find('.circle').attr('menu-link', index);
$(this).find('.list-menu').clone().appendTo('body').attr('menu-link', index);
});
$('.menu-container .circle').click(function() {
var linkedVideo = $('section').closest('body').find('.list-menu[menu-link="' + $(this).attr('menu-link') + '"]');
linkedVideo.toggleClass('reveal-modal');
});
$('section').closest('body').find('.close-iframe').click(function() {
$(this).closest('.list-menu').toggleClass('reveal-modal');
});
Here is what the popup is supposed to look like. https://imgur.com/a/pyq9zis
I've been trying to fix for a while but can't seem to find a fix.
Here is also the html for both index.html and hotelam.html
First index
<!-- Navigation section ()
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="container">
<div class="row">
<div class="brand">
<a href="home.html">
<img src="images/Logo4.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Second Hotelam.html
<!-- Navigation section
================================================== -->
<div class="nav-container">
<nav class="nav-inner transparent">
<div class="navbar">
<div class="color9">
<div class="container">
<div class="row">
<div class="brand2">
<a href="home.html">
<img src="images/brandl.png" ></a>
</a>
</div>
<div class="navicon">
<div class="menu-container">
<div class="circle dark inline">
<i class="icon ion-navicon"></i>
</div>
<div class="list-menu">
<i class="icon ion-close-round close-iframe"></i>
<div class="intro-inner">
<ul id="nav-menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>

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);
}

CSS Responsive absolute div inside relative div

I'm relatively new to CSS and I'm trying to build a prototype where I have a big Div with several divs inside in an specific position. I want these div's to always occupy that spot but I want it to be responsive.
My code is kinda all over the place after trying several diferent things but the yellow div is what I'm trying to make. I want to place all the other divs in a circular way but want them to always use % of the parent div's space and shrink but keep the same "relative" position to the parent.
var openSide = false;
function side() {
if (!openSide) {
document.getElementById("main").style.marginLeft = "15%";
document.getElementById("main").style.paddingLeft = "10px";
document.getElementById("mySidebar").style.width = "15%";
document.getElementById("mySidebar").style.display = "block";
// document.getElementById("openNav").style.display = 'none
openSide = true;
} else {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidebar").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
openSide = false;
}
console.log(openSide);
}
/* The sidebar menu */
.sidenav {
/*/height: 100%; /* Full-height: remove this if you want "auto" height */
width: 15%;
/* Set the width of the sidebar */
position: fixed;
/* Fixed Sidebar (stay in place on scroll) */
z-index: 1;
/* Stay on top */
top: 70;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black */
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
display: none;
margin-left: 10px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
#main {
margin-left: 0%;
/* Same as the width of the sidebar */
margin-right: 15%;
padding-left: 10px;
padding-right: 20px;
}
body {
margin-left: 10px;
}
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: red;
margin: 10px;
padding: 20px;
font-size: 30px;
}
#map {
/*padding: 100px 100px 100px 100px;*/
position: relative;
width: 100%;
height: 600px;
top: 100px;
background: yellow;
}
.media {
position: absolute;
width: 11.07%;
height: 16.66%;
background-color: red;
}
.media:first-child {
margin-top: 15;
}
#m1 {
background: blue;
left: 400px;
top: 400px;
}
.media:hover {
background-color: pink;
z-index: 1000;
width: 200px;
height: 200px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="side()">☰</button>
<div id="header">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Side navigation -->
<div class="sidenav" id="mySidebar">
About
Services
Clients
Contact
</div>
<div id="main">
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id="map">
<div class="container">
<div class="media" style="left:465px;top:340px; background:red;">h</div>
<div class="media" style="left:530px;top:250px; background:blue;">g</div>
<div class="media" style="left:465px;top:175px;background:green ">f</div>
<div class="media" style="left:400px;top:100px;background:red">e</div>
<div class="media" style="left:335px;top:175px; background:blue">d</div>
<div class="media" style="left:270px;top:250px; background:green;">c</div>
<div class="media" style="left:335px;top:325px;">b</div>
<div class="media" id="m1">a</div>
</div>
</div>
<div class='circle-container'>
<a href='#' class='center'><img src='image.jpg'></a>
<a href='#' class='deg0'><img src='image.jpg'></a>
<a href='#' class='deg45'><img src='image.jpg'></a>
<a href='#' class='deg135'><img src='image.jpg'></a>
<a href='#' class='deg180'><img src='image.jpg'></a>
<a href='#' class='deg225'><img src='image.jpg'></a>
<a href='#' class='deg315'><img src='image.jpg'></a>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer</p>
</div>
</div>

As other commenters have noted, using % for both the positioning and the dimensions of the contained elements is a good approach here.
You can also use vmin to establish the width and height of the .container, to ensure that whether the viewport is decreased horizontally or vertically, it remains visible in its entirety.
Working Example:
.container {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: yellow;
}
.container div {
position: absolute;
width: 6%;
height: 9%;
transform: translateX(-50%);
}
.a {
top: 60%;
left: 50%;
background-color: blue;
}
.b {
top: 52%;
left: 40%;
background-color: red;
}
.c {
top: 44%;
left: 30%;
background-color: green;
}
.d {
top: 36%;
left: 40%;
background-color: blue;
}
.e {
top: 28%;
left: 50%;
background-color: red;
}
.f {
top: 36%;
left: 60%;
background-color: green;
}
.g {
top: 44%;
left: 70%;
background-color: blue;
}
.h {
top: 52%;
left: 60%;
background-color: red;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
</div>

Loading screen coverd by the footer

I made a loading screen on my personal website. I found that the footer will cover my loading screen when I go into the website.
I want my loading screen can cover the entire screen when I go into the website. How can I do that?
This is my code, css and js.
<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
<div class="container">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">Powered by User</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-12"> </div>
</div>
</div>
</footer>
#cfooter {
display: block;
border: 1px solid 000000;
height: 100px;
text-align: center;
background-color: #000000;
color: #fff;
font-size: 15px;
}
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: white;
}
img.load_screen {
z-index: 9999999;
position: fixed;
left: 50%;
top: 50%;
margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
background: white;
}
$(function() {
$("div.load_screen").fadeIn("slow")
setTimeout(function() {
$("div.load_screen").fadeOut("slow")
}, 3000);
})

add z-index: 999; to div.load_screen

Add #cfooter {z-index: 1}
and add top and left 0.
div.load_screen {
position:fixed;
width: 100%;
height: 100%;
background: red;
top: 0;
left:0;
}
Here is the working example. I have added red background just to test it:
https://jsfiddle.net/o7wd4mfp/4/