We Keep Coding

How to fix the unusual webpage behaviour - multiple btn active of "portfolio"

I'm facing a problem in fixing up this unusual web page behavior. I have included Github page link. On removing nav tag the problem gets solved. But I need the nav tag.
I tried deleting the nav element from dev console and found the nav tag is effecting the below section "workshop_intro".
Here is the Github page link:
https://sarang13579.github.io/expt/
Github code:
https://github.com/sarang13579/expt
<section class="workshop_intro">
<div class="container py-2">
<h1 class="py-4"><strong>Gallery</strong></h1>
<p>Cut and Engraved products range</p>
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
<button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
<button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
<button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
</div>
I expect the portfolio section "workshop_intro" button to highlight one at a time without removing nav tag.

The issue could be due to presence of another HTML element with the "active" class. the query document.getElementsByClassName("active"); is returning the li element from the nav bar
<li class="nav-item active">
<a class="nav-link px-5" href="index.html">Home</a>
</li>
To select the button more accurately you can use document.querySelector(".btn.active");
Below is the working code
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.querySelector(".btn.active");
current.classList.remove("active");
this.classList.add("active");
});
}
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide columns by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
/* Add a grey background color on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background color to the active button */
.btn.active {
background-color: #666;
color: white;
}
body, html {
font-family: 'Open Sans', sans-serif;
height: 100%;
overflow-x:hidden;
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
.row{
margin: 0;
}
/*HEADER*/
/* Header Section */
.intro {
display: table;
width: 100%;
min-height: 88vh;
padding: 0;
background: url(../images/tooplate_middle_alt2.png) top center no-repeat;
background-color: #f6f6f6;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .fa {
font-size: 94px;
margin-bottom: 40px;
color: #fff;
}
.intro h3 {
color: #fff;
font-size: 45px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-transform: uppercase;
}
.intro p {
color: #fff;
font-size: 22px;
margin-top: 20px;
line-height: 28px;
margin-bottom: 40px;
}
.intro .btn-custom {
border-top: 1px solid rgba(255,255,255,0.4);
border-bottom: 1px solid rgba(255,255,255,0.4);
}
header .intro-text {
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
background-color: rgba(0,0,0,0.5);
padding: 25px 25px;
}
.intro-text i{
color: white;
/*size: 20px;*/
}
.intro-text a{
cursor: pointer;
/*transition: all 0.9s;
transition-property: all;
transition-duration: 0.9s;
transition-timing-function: ease;
transition-delay: 0s;*/
}
/*GRID - SECTION*/
.grid-list{
padding-top: 25px;
padding-bottom: 25px;
}
.r1 {
margin-bottom: 25px;
}
.r2{
margin-bottom: 25px;
}
.round img {
position: relative;
width: 165px;
height: 165px;
border-radius: 50%;
border: 10px solid rgba(0,0,0,0.1);
}
.more{
cursor: pointer;
}
.updates{
padding: 50px 0 50px 0;
background: #f6f6f6;
}
.update{
padding: 20px 0 20px 0;
}
.partners{
padding: 20px 0 20px 0;
}
.thumbnail{
max-height: 100%;
max-width: 100%;
object-fit: cover;
margin: 10px 0 10px 0;
}
/*FOOTER*/
footer {
background: #333;
width: 100%;
/*padding: 30px 0 20px;*/
}
footer .container{
padding: 30px 0 20px;
}
footer .social ul li {
display: inline-block;
padding: 0 20px;
}
footer p {
color: #666;
font-size: 15px;
}
.company{
padding-top: 25px;
}
.title {
color: grey;
}
.round2 img {
position: relative;
max-width: 65%;
height: auto;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.1);
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.blg_img img {
width: 100%;
padding: 20px;
height:auto;
object-fit: cover
}
.blg_img2 img {
width: 100%;
padding: 20px;
height:200px;
object-fit: cover
}
.span4 img {
margin-right: 15px;
}
.span4 .img-left {
float: left;
}
.span4 .img-right {
float: right;
}
.contact{
padding: 50px 0;
}
.our_company{
padding: 0 15px;
}
.products{
}
.blog{
margin: 25px 0;
}
/*Laser technology*/
.pimg img{
width: 100%;
}
.laser_page h1{
color: #007BFF;
}
.product-detail ul li {
display: inline-block;
background-color: #f9f9f9;
border: none;
margin: 8px 15px;
}
.product-detail ul li a {
text-align: left;
font-size: 12px;
color: #6d7a83;
line-height: 16px;
text-decoration: none;
padding: 10px 10px;
}
.laser_tech .carousel-caption {
bottom: auto;
top: -10px;
right: -125px;
}
.laser_tech .carousel h5{
color: #007bff;
font-weight: bolder;
font-size: 20px;
}
.laser_tech .carousel-indicators li{
background-color: #007bff;
}
.laser_tech .carousel-control-next-icon{
background-color: #000;
}
.laser_tech .carousel-control-prev-icon{
background-color: #000;
}
.laser_page .card{
padding: 15px 0;
margin: 15px 0;
}
.laser_page .card-img-top {
height: 145px;
}
.laser_page .card-body .btn-primary{
bottom: 0;
}
.CO2 h2{
color: #007BFF;
}
.CO2 img, .fiber img, .marking img{
max-height: 260px;
max-width: 330px;
}
.fiber h2{
color: #007BFF;
}
.sz{
font-size: 12px;
}
.marking h2{
color: #007BFF;
}
/*Laser workshop*/
.workshop_intro h1{
color: #007BFF;
}
.laser_work .card{
padding: 15px 0;
margin: 15px 0;
}
.laser_work .card-img-top {
height: 180px;
}
.laser_work .card-body .btn-primary{
bottom: 0;
* {
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/portfolio.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="d-flex flex-column" style="min-height: 100vh">
<main class="flex-fill">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="images/tooplate_logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link px-5" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link px-5" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link px-5" href="blog.html">Blogs</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link px-5" href="products.html">Products</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle px-5" href="products.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item" href="products.html">Products Page</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="laser_technology.html">Laser Technology</a>
<a class="dropdown-item" href="instruments.html">Instruments</a>
<a class="dropdown-item" href="laser_workshop.html">Laser Job Shop</a>
<a class="dropdown-item" href="service.html">Service</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-5" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Laser Technology -->
<!-- <section class="laser_tech">
<div class="container">
<h1 class="py-4">Laser Job Shop</h1>
<div class="row py-4">
<div class="col-md-6">
<div class="round">
<div class="fakeimg">Fake Image</div>
</div>
</div>
<div class="col-md-6">
<div class="round">
<div class="fakeimg">Fake Image</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Laser Workshop -->
<section class="workshop_intro">
<div class="container py-2">
<h1 class="py-4"><strong>Gallery</strong></h1>
<p>Cut and Engraved products range</p>
<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('wood')"> Wood Cutting and Engraving</button>
<button class="btn" onclick="filterSelection('stone')"> Stone Engraving</button>
<button class="btn" onclick="filterSelection('glass')"> Glass Engraving</button>
<button class="btn" onclick="filterSelection('others')"> Others Cutting and Engraving</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column wood">
<div class="content">
<img src="images/mountains.jpg" alt="Mountains" style="width:100%">
<h4>Mountains</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column wood">
<div class="content">
<img src="images/lights.jpg" alt="Lights" style="width:100%">
<h4>Lights</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column wood">
<div class="content">
<img src="images/nature.jpg" alt="Nature" style="width:100%">
<h4>Forest</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column stone">
<div class="content">
<img src="images/cars1.jpg" alt="Car" style="width:100%">
<h4>Retro</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column stone">
<div class="content">
<img src="images/cars2.jpg" alt="Car" style="width:100%">
<h4>Fast</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column stone">
<div class="content">
<img src="images/cars3.jpg" alt="Car" style="width:100%">
<h4>Classic</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column glass">
<div class="content">
<img src="images/people1.jpg" alt="People" style="width:100%">
<h4>Girl</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column glass">
<div class="content">
<img src="images/people2.jpg" alt="People" style="width:100%">
<h4>Man</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column glass">
<div class="content">
<img src="images/people3.jpg" alt="People" style="width:100%">
<h4>Woman</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column others">
<div class="content">
<img src="images/people1.jpg" alt="People" style="width:100%">
<h4>Girl</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column others">
<div class="content">
<img src="images/people2.jpg" alt="People" style="width:100%">
<h4>Man</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column others">
<div class="content">
<img src="images/people3.jpg" alt="People" style="width:100%">
<h4>Woman</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- END GRID -->
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer>
<div class="container text-center">
<div class="row">
<div class="col-md-12">
<div class="social">
<ul>
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-linkedin"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
</ul>
</div>
<p>© example</p>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Centering a div and having issues

I am having issues centering this div which is being activated in JavaScript to show onclick of an <a> tag. It can be found at the bottom of the page with the text "This is a test" with a small padding background. Usually it would only appear with an onclick but I have disabled that for now.
I have tried justify-content and all the usuals (I think). I have a feeling that a parent tag is interfering with it and giving it CSS that I don't want it to. I have used Inspect Element to no avail in finding this, if it is the case.
Any advice would be appreciated.
Thanks.
var mouseFollowX = 0,
mouseFollowY = 0,
x = 0,
y = 0,
friction = 2 / 30;
function backgroundMover() {
x += (mouseFollowX - x) * friction;
y += (mouseFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.3)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(backgroundMover);
}
$('.wrap').on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
mouseFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
mouseFollowY = (10 * lMouseY) / 100;
});
backgroundMover();
function showDevFunction() {
var getDev = document.getElementById("showDev");
if (getDev.style.display === "block") {
getDev.style.display = "none";
} else {
getDev.style.display = "block";
}
}
#mainnav {
background-color: #FBFBFB;
}
h1 {
margin-bottom: 0;
padding: 0;
}
.header-brand {
margin-bottom: -8px;
margin-top: 0;
margin-right: 20px;
}
h1.header-brand {
margin-right: 25px;
margin-top: -10px;
margin-left: 20px;
}
.nav-bg {
padding: 33px;
margin: 0;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
}
h1.hero-heading {
color: white;
position: absolute;
padding-left: 15%;
top: 0.70em;
left: -0.75em;
line-height: 0.8;
font-family: Roboto, sans-serif;
font-size: 10vh;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
text-shadow: 3px 3px 5px black;
}
.hero-heading span {
padding-left: 0.5em;
}
h3.hero-content {
color: white;
position: absolute;
background-color: rgba(53, 79, 92, 0.50);
padding: 0.75em 0.75em 0.75em 15%;
top: 11em;
left: -0.75em;
line-height: 1.5em;
max-width: 76%;
font-family: Roboto Slab, serif;
font-size: 2.5vh;
font-weight: lighter;
font-style: normal;
}
.wrap {
width: 100%;
height: 55vh;
position: relative;
overflow: hidden;
margin-bottom: 35px;
}
.bg {
z-index: -1;
position: static;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
width: 100%;
height: 55vh;
transform: scale(1.3);
}
.cta {}
img.cta {
opacity: 100;
background: white;
-o-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
/* ...and now override with proper CSS property */
transition: opacity .2s ease-out;
}
img.cta:hover {
opacity: 0;
}
.cf {}
.cf img {
position: absolute;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.cf img.top:hover {
opacity: 0;
}
.cta-sub {
position: relative;
margin-top: 200px;
}
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin: 275px 0 0 0;
}
#showDev {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Layouts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles/main.css" type="text/css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">
</head>
<body>
<header class="navbar-inverse" role="banner">
<div id="mainnav">
<!-- Can change class="navbar-static-top", to class="navbar-fixed-top" to have nav stuck top -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<a class="header-brand" href="index.html"><img src="img\main\logo-text-web.png" height="100" width="408"></a>
<!-- <h1 class="header-brand">David Olijnyk <br>Webmaster Services</h1> -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link nav-bg" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="wrap">
<div class="bg"></div>
<h1 class="hero-heading"> your <br> <span>solution</span></h1>
<div class="hero-content-box">
<h3 class="hero-content">Keep your most important business services in one place, with easy and frequent communication. Having an online presence has never been so easy and impactful. </h3>
</div>
</div>
<div class="container">
<div class="row">
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDevFunction()">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
<div class="show-more" id="showDev">
This is a test
</div>
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDev">
<img class="cta bottom rounded" src="img/home/photo-more.png">
<img class="cta top rounded" src="img/home/photo.png">
</a>
<a href="#" class="cf col-4 d-flex justify-content-center">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
</div>
<div class="row cta-sub">
<h3 class="cf col-4 d-flex justify-content-center">Webmaster</h3>
<h3 class="cf col-4 d-flex justify-content-center">Photography</h3>
<h3 class="cf col-4 d-flex justify-content-center">Graphic Design</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>

The only block with position:relativeis the .wrap so #showDev is positioned relatively to the body.
Add the following position:relative to the .container element and #showDev will do 80% of this block.

I would use margin:auto and text-align: center.
.nameOfTheDiv{
margin: auto;
text-align: center;
}
This will help to position your div in the center.

In your show-more class you are using margin-left: auto; and margin-right: auto;. But again you have used margin: 275px 0 0 0;
which is manipulating the previously set values. Additionally, you have to add left: 0; and right: 0; with it.
So, change it like below:
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin-top: 275px;
left: 0;
right: 0;
}

In case you are looking for something to center the div like an alert box
div {
position: absolute;
margin: auto;
max-width: 300px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Bootstrap navbar, full height navbar-collapse but with weird animation

I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.
Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?
I copied the code in this fiddle
body {
padding-top: 53px;
}
.pids-navbar{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 99999;
}
.pids-navbar-toggle .pids-icon-bar {
display: block;
width: 16px;
height: 1px;
border-radius: 1px;
}
.pids-navbar-toggle {
margin-top: 14px;
margin-bottom: 14px;
margin-right: 0px;
float: left;
}
.pids-navbar-nav {
margin: 0px -15px;
font-weight: lighter;
}
.pids-navbar-collapse {
border: 0px;
height: calc(100vh - 60px);
}
.full-height {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-static-top pids-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
<ul class="nav navbar-nav pids-navbar-nav full-height">
<li class="active">
Home 1
</li>
<li class="">
Home 2
</li>
<li class="">
Home 3
</li>
</ul>
</div>
</div>
</nav>
Thanks!

I had exactly the same problem and what worked for me is to set the height of the ul to 100vh, not the height of the whole navbar-collapse. See code:
.navbar-collapse ul {
height: 100vh;
}
note: I am using bootstrap 4.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.wrap {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="wrap">
Home
Home 1
Home 2
Home 3
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>

insert text (menu) near navigation bar

I am using bootsrap 4 alpha 6, and midnight.js to change the color of navigation menu toggler. I want to insert a text (MENU) next to it. Example in the Capture. For text toggler I use fontawesome.
Thanks your time and help!
the source html
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x"></span>
</button>
</div>
using midnight.js, will looks like this
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 40px;"><div class="midnightHeader white-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(110%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(-110%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div><div class="midnightHeader blue-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div></button>
</div>
It works ok, only I want to add a text to it.
now it looks like:
and I want
I tried
MENU<span class="fa fa-bars fa-2x"></span>
it looks

Try by adding display:inline; to your icon:
<span class="fa fa-bars fa-2x" style="display:inline;"></span>

Try doing this
MENU<span class="fa fa-bars fa-2x" style="display:inline;"></span>
This will make the icon an inline element (same as the text)
Also check to see if something is restricting the width of the element, also check the parent elements for this too. This may prevent the next from displaying inline with the icon.

I've manipulated some code which I answered here some time ago. Tested with my phone and it works. Its on Bootstrap. I am answering this question and drinking some wine. So, I will just close my computer soon after posting this answer. Hope is what you want.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
</script>
<style>
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.navbar-default .navbar-nav {
font-size: 15px;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav>li {
position: relative;
}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}
.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}
#media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="row">
<div class="col-sm-10 visible-sm visible-md visible-lg">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div class="col-xs-7 visible-xs">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div style="margin-top:15px;text-align:right;" class="col-xs-3 visible-xs">
<strong>Menu</strong>
</div>
<div class="col-xs-2">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
<div class="nav-line"></div>
</li>
<li class="dropdown" id="nav-about">
<a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
</a>
<ul class="dropdown-menu">
<li>The Founder</li>
<li role="separator" class="divider"></li>
<li>HSE Policy</li>
<li>Quality Policy</li>
</ul>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#services">Services</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#projects">Our Projects</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#whyus">Why Us</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#contact">Contact</a>
<div class="nav-line"></div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>

Navbar hiding a div

My navbar is hiding my the div that should be above it
Not complete replica of my own but here is the fiddle
HTML:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Burger Corner</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- NAVBAR -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand page-scroll" href="#page-top">Burger Corner</a>-->
<img src="images/logo.png" width="90" height="60">
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right main-nav">
<li class="hidden"><a class="page-scroll" href="#page-top"></a></li>
<li><a class="page-scroll color_animation" href="#intro">Welcome</a></li>
<li><a class="page-scroll color_animation" href="#services">About us</a></li>
<li><a class="page-scroll color_animation" href="#reservation">Reservation</a></li>
<li><a class="page-scroll color_animation" href="#contact">Contact us</a></li>
<li><a id="login_lnk"class="page-scroll color_animation" href="#login" data-toggle="modal" >Login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section class="top-title">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Burger Corner</h1>
</div>
</div>
</div>
</section>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Welcome section</h1>
</div>
</div>
</div>
</section>
<!-- About Section -->
<div id="wall_1" class="image"></div>
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
CSS for the problematic div and the one that works :
.top_title{
font-family: 'Playball', cursive;
/* background-image: url(../images/intro.jpg) no-repeat center center;*/
background-size: cover;
width: 100%;
height: 100px;
background-color:#990000;
text-align:center;
padding-top: 150px;
}
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
z-index: 1;
}
CSS for the navbar:
.color_animation {
text-decoration: none;
margin-right: -5px;
margin-left: -5px !important;
color: white !important;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.color_animation:hover{
color: #990000 !important;
}
.main-nav a {
font-size: 20px;
font-weight: 700;
text-decoration: none;
color: #000;
display: block;
text-align: center;
padding: 2px 0;
transition: color 0.3s ease-in-out;
}
.main-nav {
padding: 0;
/*margin: auto 0 auto;*/
}
li{
color: white !important;
word-spacing: 5px !important;
}
Extra CSS:
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
I even tried using the intro-section class and modified it, changed its name and added some code but it genuinely doesnt work.The navbar hides it, it doesnt have the background i told it to have or even the height
I made the navbar invisible just for the testing and as you can see the div is under the navbar and the orange section is the one i said i took its css and modified it.

I don't think there is a CSS solution to your code. You can check the scroll position to make the navbar fixed and back to static, by removing or adding the navbar-fixed-top class, like this:
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('.navbar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 51) {
$('.navbar').removeClass('navbar-fixed-top');
}
});
Updated FIDDLE.