Why is my website slightly wider than the window?

Why is my website slightly wider than the window? - html

I'm working on a school project in which I have to create a small Webpage introducing you to a topic of choice.
Unfortunately my website has a horizontal scrollbar and I don't have a clue which element causes it. I tried disabling the elements one after another but haven't found a solution
Thanks in advance for any tips!
<!doctype html>
<html lang="de">
<head>
<title>VR</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="colorlib-main-nav" role="navigation">
<i></i>
<div class="js-fullheight colorlib-table">
<div class="img" style="background-image: url(images/bg_3.jpg);"></div>
<div class="colorlib-table-cell js-fullheight">
<div class="row no-gutters">
<div class="col-md-12 text-center">
<h1 class="mb-4">Company Logo</h1>
<ul>
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="header h-100">
<i></i>
<h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
</div>
<div class="h-100">
<h2 class="center">Was ist Virtual Reality (VR)</h2>
<p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
</div>
<div id="vr-headset-kategorien" class="">
<!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
<div id="standalone" class="row">
<!---->
<div class="vr-left_side container col-lg-6">
<div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> Quest 2 Headset - FanArt by joseVG on Sketchfab</p></div>
</div>
<div class="vr-right_side container col-lg-6">
<h3>Standalone</h3>
<p>Standalone VR-Headsets benötigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super für Anfänger geeignet</p>
<p>
Vorteile:<br />
Kein guter PC benötigt<br />
Niedriger Einstiegspreis trotz guter Hardware<br/>
Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
<p>Nachteile:<br />
Je nach Headset schlechte Performance bei fordernden Spielen</p>
</div>
</div>
<div id="pc" class="row">
<div class="vr-left_side container col-lg-6">
<div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> HTC Vive by Eternal Realm on Sketchfab</p></div>
</div>
<div class="vr-right_side container col-lg-6">
<h3>PC-VR</h3>
<p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden über ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem schönes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem für Enthusiasten geeignet</p>
<p>Vorteile:<br />
Hohe Auflösung<br />
Wenig Lags</p>
<p>Nachteile:<br />
Hoher Einstiegspreis</p>
</div>
</div>
<div id="fulldive" class="row">
<div class="vr-left_side container col-lg-6">
<div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> neuraLink by rfarencibia on Sketchfab</p></div>
</div>
<div class="vr-right_side container col-lg-6">
<h3>Full-Dive VR</h3>
<p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-, und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>
<p>Vorteile:<br />
Unvergleichliche Immersion</p>
<p>Nachteile:<br />
Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber möglich</p>
</div>
</div>
</div>
<!-- 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>
<script>
(function($) {
"use strict";
var fullHeight = function() {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
});
};
fullHeight();
var burgerMenu = function() {
$('.js-colorlib-nav-toggle').on('click', function(event) {
event.preventDefault();
var $this = $(this);
if( $('body').hasClass('menu-show') ) {
$('body').removeClass('menu-show');
$('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
} else {
$('body').addClass('menu-show');
setTimeout(function(){
$('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
}, 900);
}
})
};
burgerMenu();
})(jQuery);
</script>
</body>
</html>
html, body {
background-color: black;
color: white;
height: 100%;
min-height: 100%;
}
#h-100{
/*height: 100%;
min-height: 100%;*/
/*padding-top: 30%;
padding-bottom: 30%;*/
text-align: center;
}
.introduction {
background-image: url("beat-saber-intro.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.row{
padding-bottom: 10%;
}
.sketchfab-embed-wrapper{
height: 100%;
margin-bottom: 200px;
}
iframe{
height: 100%;
width: 100%;
}
header {
height: 100%;
min-height: 100%;
}
.center{
text-align: center;
}
/* Menu*/
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
#colorlib-main-nav {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.99);
z-index: 1002;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0.1);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
overflow-y: scroll; }
#colorlib-main-nav .colorlib-table {
display: table;
width: 100%;
height: 100%; }
#colorlib-main-nav .colorlib-table .img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
opacity: 1; }
#colorlib-main-nav .colorlib-table .img:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: rgba(0, 0, 0, 0.3); }
#colorlib-main-nav .colorlib-table .colorlib-table-cell {
display: table-cell;
vertical-align: middle; }
#colorlib-main-nav .colorlib-nav-toggle {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
height: 44px;
width: 44px;
line-height: 0;
padding: 0 !important;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
#media (prefers-reduced-motion: reduce) {
#colorlib-main-nav .colorlib-nav-toggle {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
#colorlib-main-nav .colorlib-nav-toggle i {
top: 18px !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
text-indent: 0; }
#colorlib-main-nav .colorlib-nav-toggle.show {
visibility: visible;
opacity: 1; }
#colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
content: '';
width: 40px;
height: 2px;
background: #fff;
position: absolute;
left: 0; }
.menu-show #colorlib-main-nav {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
#colorlib-main-nav .logo {
font-size: 40px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif; }
#colorlib-main-nav .logo span {
font-size: 14px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 8px; }
#colorlib-main-nav ul {
padding: 0;
margin: 0;
display: block; }
#media (max-width: 767.98px) {
#colorlib-main-nav ul {
padding: 20px 0 0 0; } }
#colorlib-main-nav ul li {
padding: 0;
margin: 0;
list-style: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase; }
#colorlib-main-nav ul li a {
display: block;
color: white;
padding: 5px 0; }
#colorlib-main-nav ul li a span {
color: white;
position: relative;
padding: 0 10px; }
#colorlib-main-nav ul li a span small {
position: absolute;
bottom: 7px;
left: -30px;
font-size: 16px;
color: rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
outline: none;
text-decoration: none; }
#colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
#colorlib-main-nav ul li.active a span {
color: #f8b500; }
#colorlib-main-nav ul li.active a span:before {
background: #fec771;
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
header {
padding: 2em 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto; }
#media (max-width: 767.98px) {
header {
padding: 1em 0;
position: absolute; } }
header .colorlib-navbar-brand {
float: left; }
header .colorlib-navbar-brand .colorlib-logo {
font-size: 12px;
color: #fff;
letter-spacing: 5px;
font-weight: 600;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif;
text-transform: uppercase; }
header .colorlib-navbar-brand .colorlib-logo span {
font-size: 11px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 7px; }
header .colorlib-navbar-brand .colorlib-logo i {
color: #fec771;
position: absolute;
top: -18px;
bottom: 0;
left: 7px;
font-size: 48px; }
header .colorlib-navbar-brand .colorlib-logo:hover {
text-decoration: none !important; }
header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
outline: none;
text-decoration: none; }
.colorlib-nav-toggle {
cursor: pointer;
text-decoration: none; }
.colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
background: #000; }
.colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
background: #000; }
.colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
outline: none;
border-bottom: none !important; }
.colorlib-nav-toggle i {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
color: #000;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.menu-show .colorlib-nav-toggle i {
background: #fff;
color: #fff; }
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
content: '';
width: 30px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
.menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
background: #fff; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle.dark i {
position: relative;
color: #fff;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
background: #fff;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle i::before {
top: -7px; }
.colorlib-nav-toggle i::after {
bottom: -7px; }
.colorlib-nav-toggle:hover i::before {
top: -10px; }
.colorlib-nav-toggle:hover i::after {
bottom: -10px; }
.colorlib-nav-toggle.active i {
background: transparent; }
.colorlib-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.colorlib-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
.colorlib-nav-toggle {
float: right;
z-index: 1003;
position: relative;
top: 0;
right: 0;
display: block;
margin: 0 auto;
cursor: pointer;
margin-top: 0; }
#media (max-width: 767.98px) {
.colorlib-nav-toggle {
right: 10px; } }
.hero-wrap {
background: #202020; }
.hero-wrap .slider-text .desc h1 {
font-size: 6vw;
font-weight: 700;
color: #fff;
text-transform: uppercase; }
.hero-wrap .slider-text .desc h3 {
color: rgba(255, 255, 255, 0.8);
font-size: 18px; }

You're using rows without using a container around them. The two elements have counterbalancing margins. See the docs and add either container or container-fluid to the parent of your rows.
You should not have container classes on your columns. They're not needed there, even when nesting.

The margins in your .row class is causing the issue:
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/* margin-right: -15px; */
/* margin-left: -15px; */
}
You can add overflow-x: hidden; to body as a quickfix.
(function($) {
"use strict";
var fullHeight = function() {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function() {
$('.js-fullheight').css('height', $(window).height());
});
};
fullHeight();
var burgerMenu = function() {
$('.js-colorlib-nav-toggle').on('click', function(event) {
event.preventDefault();
var $this = $(this);
if ($('body').hasClass('menu-show')) {
$('body').removeClass('menu-show');
$('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
} else {
$('body').addClass('menu-show');
setTimeout(function() {
$('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
}, 900);
}
})
};
burgerMenu();
})(jQuery);
html,
body {
background-color: black;
color: white;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
#h-100 {
/*height: 100%;
min-height: 100%;*/
/*padding-top: 30%;
padding-bottom: 30%;*/
text-align: center;
}
.introduction {
background-image: url("beat-saber-intro.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.row {
padding-bottom: 10%;
}
.sketchfab-embed-wrapper {
height: 100%;
margin-bottom: 200px;
}
iframe {
height: 100%;
width: 100%;
}
header {
height: 100%;
min-height: 100%;
}
.center {
text-align: center;
}
/* Menu*/
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#colorlib-main-nav {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.99);
z-index: 1002;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0.1);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
overflow-y: scroll;
}
#colorlib-main-nav .colorlib-table {
display: table;
width: 100%;
height: 100%;
}
#colorlib-main-nav .colorlib-table .img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
opacity: 1;
}
#colorlib-main-nav .colorlib-table .img:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: rgba(0, 0, 0, 0.3);
}
#colorlib-main-nav .colorlib-table .colorlib-table-cell {
display: table-cell;
vertical-align: middle;
}
#colorlib-main-nav .colorlib-nav-toggle {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
height: 44px;
width: 44px;
line-height: 0;
padding: 0 !important;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#media (prefers-reduced-motion: reduce) {
#colorlib-main-nav .colorlib-nav-toggle {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
#colorlib-main-nav .colorlib-nav-toggle i {
top: 18px !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
text-indent: 0;
}
#colorlib-main-nav .colorlib-nav-toggle.show {
visibility: visible;
opacity: 1;
}
#colorlib-main-nav .colorlib-nav-toggle:hover i::before,
#colorlib-main-nav .colorlib-nav-toggle:hover i::after {
content: '';
width: 40px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
}
.menu-show #colorlib-main-nav {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#colorlib-main-nav .logo {
font-size: 40px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif;
}
#colorlib-main-nav .logo span {
font-size: 14px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 8px;
}
#colorlib-main-nav ul {
padding: 0;
margin: 0;
display: block;
}
#media (max-width: 767.98px) {
#colorlib-main-nav ul {
padding: 20px 0 0 0;
}
}
#colorlib-main-nav ul li {
padding: 0;
margin: 0;
list-style: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase;
}
#colorlib-main-nav ul li a {
display: block;
color: white;
padding: 5px 0;
}
#colorlib-main-nav ul li a span {
color: white;
position: relative;
padding: 0 10px;
}
#colorlib-main-nav ul li a span small {
position: absolute;
bottom: 7px;
left: -30px;
font-size: 16px;
color: rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#colorlib-main-nav ul li a:hover,
#colorlib-main-nav ul li a:active,
#colorlib-main-nav ul li a:focus {
outline: none;
text-decoration: none;
}
#colorlib-main-nav ul li a:hover span:before,
#colorlib-main-nav ul li a:active span:before,
#colorlib-main-nav ul li a:focus span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
#colorlib-main-nav ul li.active a span {
color: #f8b500;
}
#colorlib-main-nav ul li.active a span:before {
background: #fec771;
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
header {
padding: 2em 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto;
}
#media (max-width: 767.98px) {
header {
padding: 1em 0;
position: absolute;
}
}
header .colorlib-navbar-brand {
float: left;
}
header .colorlib-navbar-brand .colorlib-logo {
font-size: 12px;
color: #fff;
letter-spacing: 5px;
font-weight: 600;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif;
text-transform: uppercase;
}
header .colorlib-navbar-brand .colorlib-logo span {
font-size: 11px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 7px;
}
header .colorlib-navbar-brand .colorlib-logo i {
color: #fec771;
position: absolute;
top: -18px;
bottom: 0;
left: 7px;
font-size: 48px;
}
header .colorlib-navbar-brand .colorlib-logo:hover {
text-decoration: none !important;
}
header .colorlib-navbar-brand .colorlib-logo:active,
header .colorlib-navbar-brand .colorlib-logo:focus {
outline: none;
text-decoration: none;
}
.colorlib-nav-toggle {
cursor: pointer;
text-decoration: none;
}
.colorlib-nav-toggle.active i::before,
.colorlib-nav-toggle.active i::after {
background: #000;
}
.colorlib-nav-toggle.dark.active i::before,
.colorlib-nav-toggle.dark.active i::after {
background: #000;
}
.colorlib-nav-toggle:hover,
.colorlib-nav-toggle:focus,
.colorlib-nav-toggle:active {
outline: none;
border-bottom: none !important;
}
.colorlib-nav-toggle i {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
color: #000;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.menu-show .colorlib-nav-toggle i {
background: #fff;
color: #fff;
}
.colorlib-nav-toggle i::before,
.colorlib-nav-toggle i::after {
content: '';
width: 30px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.menu-show .colorlib-nav-toggle i::before,
.menu-show .colorlib-nav-toggle i::after {
background: #fff;
}
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle i::before,
.colorlib-nav-toggle i::after {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
.colorlib-nav-toggle.dark i {
position: relative;
color: #fff;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.colorlib-nav-toggle.dark i::before,
.colorlib-nav-toggle.dark i::after {
background: #fff;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle.dark i::before,
.colorlib-nav-toggle.dark i::after {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
.colorlib-nav-toggle i::before {
top: -7px;
}
.colorlib-nav-toggle i::after {
bottom: -7px;
}
.colorlib-nav-toggle:hover i::before {
top: -10px;
}
.colorlib-nav-toggle:hover i::after {
bottom: -10px;
}
.colorlib-nav-toggle.active i {
background: transparent;
}
.colorlib-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.colorlib-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
.colorlib-nav-toggle {
float: right;
z-index: 1003;
position: relative;
top: 0;
right: 0;
display: block;
margin: 0 auto;
cursor: pointer;
margin-top: 0;
}
#media (max-width: 767.98px) {
.colorlib-nav-toggle {
right: 10px;
}
}
.hero-wrap {
background: #202020;
}
.hero-wrap .slider-text .desc h1 {
font-size: 6vw;
font-weight: 700;
color: #fff;
text-transform: uppercase;
}
.hero-wrap .slider-text .desc h3 {
color: rgba(255, 255, 255, 0.8);
font-size: 18px;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav id="colorlib-main-nav" role="navigation">
<i></i>
<div class="js-fullheight colorlib-table">
<div class="img" style="background-image: url(images/bg_3.jpg);"></div>
<div class="colorlib-table-cell js-fullheight">
<div class="row no-gutters">
<div class="col-md-12 text-center">
<h1 class="mb-4">Company Logo</h1>
<ul>
<li class="active"><span>Home</span></li>
<li><span>About</span></li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="header h-100">
<i></i>
<h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
</div>
<div class="h-100">
<h2 class="center">Was ist Virtual Reality (VR)</h2>
<p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
</div>
<div id="vr-headset-kategorien" class="">
<!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
<div id="standalone" class="row">
<!---->
<div class="vr-left_side container col-lg-6">
<div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share
src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> Quest 2 Headset - FanArt by joseVG on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3"
target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
</div>
</div>
<div class="vr-right_side container col-lg-6">
<h3>Standalone</h3>
<p>Standalone VR-Headsets benötigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super für Anfänger geeignet</p>
<p>
Vorteile:<br /> Kein guter PC benötigt<br /> Niedriger Einstiegspreis trotz guter Hardware<br/> Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
<p>Nachteile:<br /> Je nach Headset schlechte Performance bei fordernden Spielen</p>
</div>
</div>
<div id="pc" class="row">
<div class="vr-left_side container col-lg-6">
<div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> HTC Vive by Eternal Realm on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33"
target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
</div>
</div>
<div class="vr-right_side container col-lg-6">
<h3>PC-VR</h3>
<p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden über ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem schönes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie
vor allem für Enthusiasten geeignet</p>
<p>Vorteile:<br /> Hohe Auflösung<br /> Wenig Lags</p>
<p>Nachteile:<br /> Hoher Einstiegspreis</p>
</div>
</div>
<div id="fulldive" class="row">
<div class="vr-left_side container col-lg-6">
<div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> neuraLink by rfarencibia on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b"
target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
</div>
</div>
<div class="vr-right_side container col-lg-6">
<h3>Full-Dive VR</h3>
<p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-,
und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>
<p>Vorteile:<br /> Unvergleichliche Immersion</p>
<p>Nachteile:<br /> Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber möglich</p>
</div>
</div>
</div>
<!-- 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>

Related

How can i circle numbers around the circular menu

I did 8 menus with the radical circle menu. But I have 8 numbers that need to surround a circle menu. I am having a bit of a problem, thought it would be a good idea to have a circle menu with numbers surrounding it, the problem that I have is that only the number circle is not placed properly, maybe I mess up something in the code, could you help me?
I am just confused about this number circle.
.component {
position: relative;
margin-bottom: 3em;
height: 15em;
}
.cn-button {
position: absolute;
top: 115%;
left: 56%;
z-index: 11;
margin-top: -4.5em;
margin-left: -5em;
padding: 0;
width: 8em;
height: 8em;
border: none;
border-radius: 50%;
background: none;
background-color: #004691;
color: #5f259f;
text-align: center;
font-weight: 700;
font-size: 1em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
border: 6px solid #fff;
}
.circle-wrapper {
// width: 680px;
height: 501px;
border-radius: 51%;
// background: Chartreuse;
position: relative;
// margin: 100px;
transform: rotate(23deg);
}
.circle {
display: block;
position: absolute;
top: 54%;
left: 54%;
width: 50px;
height: 50px;
margin: -48px -48px -48px -53px;
background: red;
border-radius: 51%;
text-align: center;
line-height: 50px;
}
.deg-0 {
transform: rotate(45deg) translate(251px) rotate(-65deg);
background: #5ede29;
color: white;
font-weight: 600;
}
.deg-45 {
transform: rotate(90deg) translate(251px) rotate(-110deg);
background: #ffe816;
color: white;
font-weight: 600;
}
.deg-90 {
transform: rotate(135deg) translate(251px) rotate(-158deg);
background: #f74015;
color: white;
font-weight: 600;
}
.deg-135 {
transform: rotate(180deg) translate(251px) rotate(-200deg);
background: #54bef8;
color: white;
font-weight: 600;
}
.deg-180 {
transform: rotate(225deg) translate(251px) rotate(-248deg);
background: #5ede29;
color: white;
font-weight: 600;
}
.deg-225 {
transform: rotate(270deg) translate(251px) rotate(-289deg);
background: #ffe816;
color: white;
font-weight: 600;
}
.deg-270 {
transform: rotate(315deg) translate(251px) rotate(-338deg);
background: #f74015;
color: white;
font-weight: 600;
}
.deg-315 {
background: #54bef8;
transform: rotate(360deg) translate(251px) rotate(-380deg);
color: white;
font-weight: 600;
}
.btnDeactivated {
background-color: #f7f4f4 !important;
color: rgb(184 124 38);
border: 2px solid #a57c2633 !important;
}
.csstransforms .cn-wrapper {
position: absolute;
top: 100%;
left: 50%;
z-index: 10;
margin-top: -16em;
margin-left: -15.5em;
width: 34em;
height: 34em;
border-radius: 50%;
font-weight: bold;
background: transparent;
/* opacity: 0; */
-webkit-transition: all 0.3s ease 0.3s;
-moz-transition: all 0.3s ease 0.3s;
transition: all 0.3s ease 0.3s;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
pointer-events: none;
overflow: hidden;
}
/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after {
content: ".";
display: block;
font-size: 2em;
width: 6.2em;
height: 6.2em;
position: absolute;
left: 50%;
margin-left: -3.1em;
top: 50%;
margin-top: -3.1em;
border-radius: 50%;
z-index: 10;
color: transparent;
}
.csstransforms .opened-nav {
border-radius: 50%;
/* opacity: 0.2; */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
}
.cn-wrapper ul {
position: relative;
list-style: none;
margin: 0;
}
.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
// margin-top: -1.3em;
margin-left: -12em;
width: 12em;
height: 12em;
font-size: 1.5em;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: rotate(60deg) skew(60deg);
-moz-transform: rotate(60deg) skew(60deg);
-ms-transform: rotate(60deg) skew(60deg);
transform: rotate(60deg) skew(60deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
pointer-events: none;
border: 4px solid #fff;
}
.csstransforms .cn-wrapper li a {
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
border-radius: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #271b1b;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-transform: skew(-44deg) rotate(-68deg);
-moz-transform: skew(-44deg) rotate(-68deg);
-ms-transform: skew(-44deg) rotate(-68deg);
transform: skew(-44deg) rotate(-68deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto;
letter-spacing: 1px;
}
.csstransforms .cn-wrapper li a span {
position: relative;
top: 3.8em;
display: block;
font-size: 0.7em;
font-weight: bolder;
text-transform: uppercase;
left: -22px;
}
.csstransforms .cn-wrapper li a:hover {
color: white;
}
.csstransforms .cn-wrapper li a {
top: 32px;
transition: top 1s ease 0s;
}
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
color: rgb(255, 255, 255);
font-size: 30px;
font-weight: 600;
text-shadow: 2px 2px 10px black;
top: 19px;
}
.csstransforms .cn-wrapper li a:focus {
position: fixed; /* fix the displacement bug in webkit browsers when using tab key */
}
.csstransforms .opened-nav li {
-webkit-transition: all 0.3s ease 0.3s;
-moz-transition: all 0.3s ease 0.3s;
transition: all 0.3s ease 0.3s;
}
.csstransforms .opened-nav li:first-child {
transform: rotate(45deg) skew(45deg);
background: #5ede29;
}
.csstransforms .opened-nav li:nth-child(2) {
transform: rotate(90deg) skew(45deg);
background: #ffe816;
}
.csstransforms .opened-nav li:nth-child(3) {
transform: rotate(135deg) skew(45deg);
background: #f74015;
}
.csstransforms .opened-nav li:nth-child(4) {
transform: rotate(180deg) skew(45deg);
background: #54bef8;
}
.csstransforms .opened-nav li:nth-child(5) {
transform: rotate(225deg) skew(45deg);
background: #5ede29;
}
.csstransforms .opened-nav li:nth-child(6) {
transform: rotate(270deg) skew(45deg);
background: #ffe816;
}
.csstransforms .opened-nav li:nth-child(7) {
transform: rotate(315deg) skew(45deg);
background: #f74015;
}
.csstransforms .opened-nav li:nth-child(8) {
background: #54bef8;
transform: rotate(360deg) skew(45deg);
}
.no-csstransforms .cn-wrapper {
overflow: hidden;
margin: 10em auto;
padding: 0.5em;
text-align: center;
}
.no-csstransforms .cn-wrapper ul {
display: inline-block;
}
.no-csstransforms .cn-wrapper li {
float: left;
width: 5em;
height: 5em;
background-color: #fff;
text-align: center;
font-size: 1em;
line-height: 5em;
}
.no-csstransforms .cn-wrapper li a {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
background-color: #f8f8f8;
}
.no-csstransforms .cn-wrapper li.active a {
background-color: #6f325c;
color: #fff;
}
.no-csstransforms .cn-button {
display: none;
}
.learn {
transform: rotate(23deg);
}
.learn1 {
transform: rotate(-20deg);
}
.learn2 {
transform: rotate(-67deg);
}
.learn3 {
transform: rotate(-112deg);
}
.learn4 {
transform: rotate(-157deg);
}
.learn5 {
transform: rotate(-201deg);
}
.learn6 {
transform: rotate(-247deg);
}
.learn7 {
transform: rotate(69deg);
}
<div class="component csstransforms">
<button class="cn-button" id="cn-button">
<img
style="height: auto; width: 117px"
src="../../assets/Integro-Bank-Logo-Black-background_prev_ui.c022b598.png"
alt="logo"
/>
</button>
<div class="cn-wrapper opened-nav" id="cn-wrapper">
<ul>
<li>
<a #click="showMore" href="javascript:void(0)"
><span class="learn">Learn</span></a
>
</li>
<li>
<a #click="showMore2" href="javascript:void(0)"
><span class="learn1">Review</span></a
>
</li>
<li>
<a #click="showMore3" href="javascript:void(0)"
><span class="learn2">Evaluate</span></a
>
</li>
<li>
<a #click="showMore4" href="javascript:void(0)"
><span class="learn3">Sign-up</span></a
>
</li>
<li>
<a #click="showMore5" href="javascript:void(0)"
><span class="learn4">Engage</span></a
>
</li>
<li>
<a #click="showMore6" href="javascript:void(0)"
><span class="learn5">Share</span></a
>
</li>
<li>
<a #click="showMore7" href="javascript:void(0)"
><span class="learn6">Impact</span></a
>
</li>
<li>
<a #click="showMore8" href="javascript:void(0)"
><span class="learn7">Transform</span></a
>
</li>
</ul>
</div>
<!-- End of Nav Structure -->
</div>
<div class="circle-wrapper">
<div class="circle deg-180 btnDeactivated" id="btn1">1</div>
<div class="circle deg-225 btnDeactivated" id="btn2">2</div>
<div class="circle deg-270 btnDeactivated" id="btn3">3</div>
<div class="circle deg-315 btnDeactivated" id="btn4">4</div>
<div class="circle deg-0 btnDeactivated" id="btn5">5</div>
<div class="circle deg-45 btnDeactivated" id="btn6">6</div>
<div class="circle deg-90 btnDeactivated" id="btn7">7</div>
<div class="circle deg-135 btnDeactivated" id="btn8">8</div>
</div>

It's quite messy, but this is the closest I could get. Comments are added in the snippet below. To sum up, I added some wrappers (see HTML) and changed CSS a little bit.
Please let me know if this is good enough.
.component {
position: relative;
margin-bottom: 3em;
height: 15em;
display: flex; /* Added */
justify-content: center; /* Added */
}
/* Added */
.cn-button-wrapper {
width: 100%;
height: calc(34rem + 250px);
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
}
.cn-button {
position: absolute;
/* top: 115%; */ /* Removed */
/* left: 56%; */ /* Removed */
z-index: 11;
/* margin-top: -4.5em; */ /* Removed */
/* margin-left: -5em; */ /* Removed */
padding: 0;
width: 8em;
height: 8em;
border: none;
border-radius: 50%;
background: none;
background-color: #004691;
color: #5f259f;
text-align: center;
font-weight: 700;
font-size: 1em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
border: 6px solid #fff;
}
/* Added */
.circle-wrapper-outer {
width: 100%;
position: absolute;
top: 0;
top: 100px;
}
.circle-wrapper {
width: 34rem; /* Added */
height: 34rem; /* Added */
border-radius: 50%;
position: relative;
transform: rotate(23deg);
margin-left: auto; /* Added */
margin-right: auto; /* Added */
top: 0; /* Added */
}
.circle {
display: block;
position: absolute;
top: 54%;
left: 54%;
width: 50px;
height: 50px;
margin: -48px -48px -48px -53px;
background: red;
border-radius: 51%;
text-align: center;
line-height: 50px;
}
.deg-0 {
transform: rotate(45deg) translate(251px) rotate(-65deg);
background: #5ede29;
color: white;
font-weight: 600;
}
/* Added */
.deg-0-new {
transform: rotate(45deg) translate(325px) rotate(-65deg);
background: #5ede29;
color: white;
font-weight: 600;
}
.deg-45 {
transform: rotate(90deg) translate(251px) rotate(-110deg);
background: #ffe816;
color: white;
font-weight: 600;
}
/* Added */
.deg-45-new {
transform: rotate(90deg) translate(325px) rotate(-110deg);
background: #ffe816;
color: white;
font-weight: 600;
}
.deg-90 {
transform: rotate(135deg) translate(251px) rotate(-158deg);
background: #f74015;
color: white;
font-weight: 600;
}
/* Added */
.deg-90-new {
transform: rotate(135deg) translate(325px) rotate(-158deg);
background: #f74015;
color: white;
font-weight: 600;
}
.deg-135 {
transform: rotate(180deg) translate(251px) rotate(-200deg);
background: #54bef8;
color: white;
font-weight: 600;
}
/* Added */
.deg-135-new {
transform: rotate(180deg) translate(325px) rotate(-200deg);
background: #54bef8;
color: white;
font-weight: 600;
}
.deg-180 {
transform: rotate(225deg) translate(251px) rotate(-248deg);
background: #5ede29;
color: white;
font-weight: 600;
}
/* Added */
.deg-180-new {
transform: rotate(225deg) translate(305px) rotate(-248deg);
background: #5ede29;
color: white;
font-weight: 600;
}
.deg-225 {
transform: rotate(270deg) translate(251px) rotate(-289deg);
background: #ffe816;
color: white;
font-weight: 600;
}
/* Added */
.deg-225-new {
transform: rotate(270deg) translate(305px) rotate(-289deg);
background: #ffe816;
color: white;
font-weight: 600;
}
.deg-270 {
transform: rotate(315deg) translate(251px) rotate(-338deg);
background: #f74015;
color: white;
font-weight: 600;
}
/* Added */
.deg-270-new {
transform: rotate(315deg) translate(315px) rotate(-338deg);
background: #f74015;
color: white;
font-weight: 600;
}
.deg-315 {
background: #54bef8;
transform: rotate(360deg) translate(251px) rotate(-380deg);
color: white;
font-weight: 600;
}
/* Added */
.deg-315-new {
background: #54bef8;
transform: rotate(360deg) translate(325px) rotate(-380deg);
color: white;
font-weight: 600;
}
.btnDeactivated {
background-color: #f7f4f4 !important;
color: rgb(184 124 38);
border: 2px solid #a57c2633 !important;
}
.csstransforms .cn-wrapper {
position: absolute;
/* top: 100%; */ /* Removed */
/* left: 50%; */ /* Removed */
z-index: 10;
top: 100px; /* Added */
/* margin-top: -16em; */ /* Removed */
/* margin-left: -15.5em; */ /* Removed */
width: 34em;
height: 34em;
border-radius: 50%;
font-weight: bold;
background: transparent;
-webkit-transition: all 0.3s ease 0.3s;
-moz-transition: all 0.3s ease 0.3s;
transition: all 0.3s ease 0.3s;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
pointer-events: none;
overflow: hidden;
}
.csstransforms .cn-wrapper:after {
content: ".";
display: block;
font-size: 2em;
width: 6.2em;
height: 6.2em;
position: absolute;
left: 50%;
margin-left: -3.1em;
top: 50%;
margin-top: -3.1em;
border-radius: 50%;
z-index: 10;
color: transparent;
}
.csstransforms .opened-nav {
border-radius: 50%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
}
.cn-wrapper ul {
position: relative;
list-style: none;
margin: 0;
}
.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
margin-left: -12em;
width: 12em;
height: 12em;
font-size: 1.5em;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-transform: rotate(60deg) skew(60deg);
-moz-transform: rotate(60deg) skew(60deg);
-ms-transform: rotate(60deg) skew(60deg);
transform: rotate(60deg) skew(60deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
pointer-events: none;
border: 4px solid #fff;
}
.csstransforms .cn-wrapper li a {
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
border-radius: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #271b1b;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-transform: skew(-44deg) rotate(-68deg);
-moz-transform: skew(-44deg) rotate(-68deg);
-ms-transform: skew(-44deg) rotate(-68deg);
transform: skew(-44deg) rotate(-68deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto;
letter-spacing: 1px;
}
.csstransforms .cn-wrapper li a span {
position: relative;
top: 3.8em;
display: block;
font-size: 0.7em;
font-weight: bolder;
text-transform: uppercase;
left: -22px;
}
.csstransforms .cn-wrapper li a:hover {
color: white;
}
.csstransforms .cn-wrapper li a {
top: 32px;
transition: top 1s ease 0s;
}
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
color: rgb(255, 255, 255);
font-size: 30px;
font-weight: 600;
text-shadow: 2px 2px 10px black;
top: 19px;
}
.csstransforms .cn-wrapper li a:focus {
position: fixed;
}
.csstransforms .opened-nav li {
-webkit-transition: all 0.3s ease 0.3s;
-moz-transition: all 0.3s ease 0.3s;
transition: all 0.3s ease 0.3s;
}
.csstransforms .opened-nav li:first-child {
transform: rotate(45deg) skew(45deg);
background: #5ede29;
}
.csstransforms .opened-nav li:nth-child(2) {
transform: rotate(90deg) skew(45deg);
background: #ffe816;
}
.csstransforms .opened-nav li:nth-child(3) {
transform: rotate(135deg) skew(45deg);
background: #f74015;
}
.csstransforms .opened-nav li:nth-child(4) {
transform: rotate(180deg) skew(45deg);
background: #54bef8;
}
.csstransforms .opened-nav li:nth-child(5) {
transform: rotate(225deg) skew(45deg);
background: #5ede29;
}
.csstransforms .opened-nav li:nth-child(6) {
transform: rotate(270deg) skew(45deg);
background: #ffe816;
}
.csstransforms .opened-nav li:nth-child(7) {
transform: rotate(315deg) skew(45deg);
background: #f74015;
}
.csstransforms .opened-nav li:nth-child(8) {
background: #54bef8;
transform: rotate(360deg) skew(45deg);
}
.no-csstransforms .cn-wrapper {
overflow: hidden;
margin: 10em auto;
padding: 0.5em;
text-align: center;
}
.no-csstransforms .cn-wrapper ul {
display: inline-block;
}
.no-csstransforms .cn-wrapper li {
float: left;
width: 5em;
height: 5em;
background-color: #fff;
text-align: center;
font-size: 1em;
line-height: 5em;
}
.no-csstransforms .cn-wrapper li a {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
background-color: #f8f8f8;
}
.no-csstransforms .cn-wrapper li.active a {
background-color: #6f325c;
color: #fff;
}
.no-csstransforms .cn-button {
display: none;
}
.learn {
transform: rotate(23deg);
}
.learn1 {
transform: rotate(-20deg);
}
.learn2 {
transform: rotate(-67deg);
}
.learn3 {
transform: rotate(-112deg);
}
.learn4 {
transform: rotate(-157deg);
}
.learn5 {
transform: rotate(-201deg);
}
.learn6 {
transform: rotate(-247deg);
}
.learn7 {
transform: rotate(69deg);
}
<div class="component csstransforms">
<div class="cn-button-wrapper">
<button class="cn-button" id="cn-button">
<img style="height: auto; width: 117px" src="../../assets/Integro-Bank-Logo-Black-background_prev_ui.c022b598.png" alt="logo" />
</button>
</div>
<div class="cn-wrapper opened-nav" id="cn-wrapper">
<ul>
<li>
<a #click="showMore" href="javascript:void(0)"><span class="learn">Learn</span></a>
</li>
<li>
<a #click="showMore2" href="javascript:void(0)"><span class="learn1">Review</span></a>
</li>
<li>
<a #click="showMore3" href="javascript:void(0)"><span class="learn2">Evaluate</span></a>
</li>
<li>
<a #click="showMore4" href="javascript:void(0)"><span class="learn3">Sign-up</span></a>
</li>
<li>
<a #click="showMore5" href="javascript:void(0)"><span class="learn4">Engage</span></a>
</li>
<li>
<a #click="showMore6" href="javascript:void(0)"><span class="learn5">Share</span></a>
</li>
<li>
<a #click="showMore7" href="javascript:void(0)"><span class="learn6">Impact</span></a>
</li>
<li>
<a #click="showMore8" href="javascript:void(0)"><span class="learn7">Transform</span></a>
</li>
</ul>
</div>
<!-- End of Nav Structure -->
</div>
<div class="circle-wrapper-outer">
<div class="circle-wrapper">
<div class="circle deg-180-new btnDeactivated" id="btn1">1</div>
<div class="circle deg-225-new btnDeactivated" id="btn2">2</div>
<div class="circle deg-270-new btnDeactivated" id="btn3">3</div>
<div class="circle deg-315-new btnDeactivated" id="btn4">4</div>
<div class="circle deg-0-new btnDeactivated" id="btn5">5</div>
<div class="circle deg-45-new btnDeactivated" id="btn6">6</div>
<div class="circle deg-90-new btnDeactivated" id="btn7">7</div>
<div class="circle deg-135-new btnDeactivated" id="btn8">8</div>
</div>
</div>

CSS - Adding menu icon causes problem with website layout

another question regarding my school project. We have to add a menu to our website and i thus googled for a premade menu. Unfortunately, as soon as i add the menu the website layout doesn't really work any more. I already tried making the position absolute but haven't got it to work.
<html lang="de">
<head>
<title>Virtual Reality - Headsetüberblick</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="colorlib-main-nav" role="navigation">
<i></i>
<div class="js-fullheight colorlib-table">
<div class="img" style="background-image: url(images/bg_3.jpg);"></div>
<div class="colorlib-table-cell js-fullheight">
<div class="row no-gutters">
<div class="col-md-12 text-center">
<h1 class="mb-4">Gruppe 1</h1>
<ul>
<li class="active"><span>Virtual Relity</span></li>
<li><span>Thema 2</span></li>
<li><span>Thema 3</span></li>
<li><span>Thema 4</span></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<i></i>
<div class="introduction header h-100 container-fluid d-flex w-100 text-center">
<h1 id="h-100" class="h-100 row col-12 align-items-center text-center display-1 justify-content-center">VIRTUAL REALITY</h1>
</div>
<div class="h-100 container-fluid row">
<h2 style="margin-top: 50px;" class="center col-12 text-center display-4">Was ist Virtual Reality (VR)</h2>
<p class="center col-12 lead">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
</div>
...
<div class="footer-basic">
<footer>
<p class="copyright">Lukas Strutz 2021</p>
</footer>
</div>
<!-- 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>
<script>
function toggleDiv(whichdiv) {
var x = document.getElementById(whichdiv);
if (x.style.display === "none") {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
(function($) {
"use strict";
var fullHeight = function() {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
});
};
fullHeight();
var burgerMenu = function() {
$('.js-colorlib-nav-toggle').on('click', function(event) {
event.preventDefault();
var $this = $(this);
if( $('body').hasClass('menu-show') ) {
$('body').removeClass('menu-show');
$('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
} else {
$('body').addClass('menu-show');
setTimeout(function(){
$('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
}, 900);
}
})
};
burgerMenu();
})(jQuery);
</script>
</body>
</html>
/*
Stylesheet zur VR-Website - Lukas Strutz 2021
Inhalt:
1. Grundsätztliches Design der Website
2. Design des Menüs (bezogen von Colorlib)
3. Design des Footers (bezogen von epicbootstrap.com)
*/
#font-face {
font-family: 'cf_glitch_cityregular';
src: url('fonts/cfglitchcityregular-l1vz-webfont.woff2') format('woff2'),
url('fonts/cfglitchcityregular-l1vz-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html, body {
background-color: black;
color: white;
height: 100%;
min-height: 100%;
}
#h-100{
/*height: 100%;
min-height: 100%;*/
/*padding-top: 30%;
padding-bottom: 30%;*/
text-align: center;
}
/*h1 {
top: 50%;
transform: translateY(-50%);
}*/
h1{
font-family: "cf_glitch_cityregular";
}
.introduction {
background-image: url("beat-saber-intro.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.sketchfab-embed-wrapper{
height: 100%;
margin-bottom: 200px;
}
iframe{
height: 100%;
width: 100%;
}
header {
height: 100%;
min-height: 100%;
}
.center{
text-align: center;
}
.steamvr{
background-image: url("https://www.vrnerds.de/wp-content/uploads/2016/02/Steam-VR-Spiele.png");
}
.oculus{
background-image: url("oculus.jpg");
}
/* Menu*/
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
#colorlib-main-nav {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.99);
z-index: 1002;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0.1);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
overflow-y: scroll; }
#colorlib-main-nav .colorlib-table {
display: table;
width: 100%;
height: 100%; }
#colorlib-main-nav .colorlib-table .img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
opacity: 1; }
#colorlib-main-nav .colorlib-table .img:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: rgba(0, 0, 0, 0.3); }
#colorlib-main-nav .colorlib-table .colorlib-table-cell {
display: table-cell;
vertical-align: middle; }
#colorlib-main-nav .colorlib-nav-toggle {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
height: 44px;
width: 44px;
line-height: 0;
padding: 0 !important;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
#media (prefers-reduced-motion: reduce) {
#colorlib-main-nav .colorlib-nav-toggle {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
#colorlib-main-nav .colorlib-nav-toggle i {
top: 18px !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
text-indent: 0; }
#colorlib-main-nav .colorlib-nav-toggle.show {
visibility: visible;
opacity: 1; }
#colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
content: '';
width: 40px;
height: 2px;
background: #fff;
position: absolute;
left: 0; }
.menu-show #colorlib-main-nav {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
#colorlib-main-nav .logo {
font-size: 40px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif; }
#colorlib-main-nav .logo span {
font-size: 14px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 8px; }
#colorlib-main-nav ul {
padding: 0;
margin: 0;
display: block; }
#media (max-width: 767.98px) {
#colorlib-main-nav ul {
padding: 20px 0 0 0; } }
#colorlib-main-nav ul li {
padding: 0;
margin: 0;
list-style: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase; }
#colorlib-main-nav ul li a {
display: block;
color: white;
padding: 5px 0; }
#colorlib-main-nav ul li a span {
color: white;
position: relative;
padding: 0 10px; }
#colorlib-main-nav ul li a span small {
position: absolute;
bottom: 7px;
left: -30px;
font-size: 16px;
color: rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
outline: none;
text-decoration: none; }
#colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
#colorlib-main-nav ul li.active a span {
color: #f8b500; }
#colorlib-main-nav ul li.active a span:before {
background: #fec771;
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
header {
padding: 2em 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto; }
#media (max-width: 767.98px) {
header {
padding: 1em 0;
position: absolute; } }
header .colorlib-navbar-brand {
float: left; }
header .colorlib-navbar-brand .colorlib-logo {
font-size: 12px;
color: #fff;
letter-spacing: 5px;
font-weight: 600;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif;
text-transform: uppercase; }
header .colorlib-navbar-brand .colorlib-logo span {
font-size: 11px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 7px; }
header .colorlib-navbar-brand .colorlib-logo i {
color: #fec771;
position: absolute;
top: -18px;
bottom: 0;
left: 7px;
font-size: 48px; }
header .colorlib-navbar-brand .colorlib-logo:hover {
text-decoration: none !important; }
header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
outline: none;
text-decoration: none; }
.colorlib-nav-toggle {
cursor: pointer;
text-decoration: none; }
.colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
background: #000; }
.colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
background: #000; }
.colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
outline: none;
border-bottom: none !important; }
.colorlib-nav-toggle i {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
color: white;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.menu-show .colorlib-nav-toggle i {
background: #fff;
color: #fff; }
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
content: '';
width: 30px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
.menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
background: #fff; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle.dark i {
position: relative;
color: #fff;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
background: #fff;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle i::before {
top: -7px; }
.colorlib-nav-toggle i::after {
bottom: -7px; }
.colorlib-nav-toggle:hover i::before {
top: -10px; }
.colorlib-nav-toggle:hover i::after {
bottom: -10px; }
.colorlib-nav-toggle.active i {
background: transparent; }
.colorlib-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.colorlib-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
.colorlib-nav-toggle {
float: right;
z-index: 1003;
position: relative;
top: 0;
right: 0;
display: block;
margin: 0 auto;
cursor: pointer;
margin-top: 0; }
#media (max-width: 767.98px) {
.colorlib-nav-toggle {
right: 10px; } }
.hero-wrap {
background: #202020; }
.hero-wrap .slider-text .desc h1 {
font-size: 6vw;
font-weight: 700;
color: #fff;
text-transform: uppercase; }
.hero-wrap .slider-text .desc h3 {
color: rgba(255, 255, 255, 0.8);
font-size: 18px; }
.footer-basic {
padding:40px 0;
background-color:#000;
/*color:#6b6c6d;*/
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:rgb(255, 255, 255);
margin-bottom:0;
}
/* Credit to https://epicbootstrap.com/snippets/footer-basic */
You can also see this online at: https://lukasstrutz.de/website/thisdoesnotwork.html

Headline isn't centered even though it has the text-center attribute

im crating a website for a school project. Right now I'm trying to get my headlines centered.
Unfortunatly I can't figure out how to center my h1. All the other headlines work just fine except that one.
I tried different methods of centering like the Bootstrap text-center class but none of them seem to work.
Is there any error I made? I would be grateful for help!
PS: Please excuse my bad english, I'm trying to get better at writing english without using a translator
<!doctype html>
<html lang="de">
<head>
<title>Virtual Reality - Headsetüberblick</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="colorlib-main-nav" role="navigation">
<i></i>
<div class="js-fullheight colorlib-table">
<div class="img" style="background-image: url(images/bg_3.jpg);"></div>
<div class="colorlib-table-cell js-fullheight">
<div class="row no-gutters">
<div class="col-md-12 text-center">
<h1 class="mb-4">Gruppe 1</h1>
<ul>
<li class="active"><span>Virtual Relity</span></li>
<li><span>Thema 2</span></li>
<li><span>Thema 3</span></li>
<li><span>Thema 4</span></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!--<i></i>-->
<div class="introduction header h-100 container-fluid d-flex w-100 text-center">
<h1 id="h-100" class="h-100 row col-12 align-items-center text-center display-1">VIRTUAL REALITY</h1>
</div>
<div class="h-100 container-fluid row">
<h2 style="margin-top: 50px;" class="center col-12 text-center display-4">Was ist Virtual Reality (VR)</h2>
<p class="center col-12 lead">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
</div>
<div class="footer-basic">
<footer>
<p class="copyright">Lukas Strutz 2021</p>
</footer>
</div>
<!-- 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>
#font-face {
font-family: 'cf_glitch_cityregular';
src: url('fonts/cfglitchcityregular-l1vz-webfont.woff2') format('woff2'),
url('fonts/cfglitchcityregular-l1vz-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html, body {
background-color: black;
color: white;
height: 100%;
min-height: 100%;
}
#h-100{
/*height: 100%;
min-height: 100%;*/
/*padding-top: 30%;
padding-bottom: 30%;*/
text-align: center;
}
/*h1 {
top: 50%;
transform: translateY(-50%);
}*/
h1{
font-family: "cf_glitch_cityregular";
}
.introduction {
background-image: url("beat-saber-intro.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.sketchfab-embed-wrapper{
height: 100%;
margin-bottom: 200px;
}
iframe{
height: 100%;
width: 100%;
}
header {
height: 100%;
min-height: 100%;
}
.center{
text-align: center;
}
.steamvr{
background-image: url("https://www.vrnerds.de/wp-content/uploads/2016/02/Steam-VR-Spiele.png");
}
.oculus{
background-image: url("oculus.jpg");
}
/* Menu*/
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
#colorlib-main-nav {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.99);
z-index: 1002;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0.1);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
overflow-y: scroll; }
#colorlib-main-nav .colorlib-table {
display: table;
width: 100%;
height: 100%; }
#colorlib-main-nav .colorlib-table .img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
opacity: 1; }
#colorlib-main-nav .colorlib-table .img:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: rgba(0, 0, 0, 0.3); }
#colorlib-main-nav .colorlib-table .colorlib-table-cell {
display: table-cell;
vertical-align: middle; }
#colorlib-main-nav .colorlib-nav-toggle {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
height: 44px;
width: 44px;
line-height: 0;
padding: 0 !important;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
#media (prefers-reduced-motion: reduce) {
#colorlib-main-nav .colorlib-nav-toggle {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
#colorlib-main-nav .colorlib-nav-toggle i {
top: 18px !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
text-indent: 0; }
#colorlib-main-nav .colorlib-nav-toggle.show {
visibility: visible;
opacity: 1; }
#colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
content: '';
width: 40px;
height: 2px;
background: #fff;
position: absolute;
left: 0; }
.menu-show #colorlib-main-nav {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
#colorlib-main-nav .logo {
font-size: 40px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif; }
#colorlib-main-nav .logo span {
font-size: 14px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 8px; }
#colorlib-main-nav ul {
padding: 0;
margin: 0;
display: block; }
#media (max-width: 767.98px) {
#colorlib-main-nav ul {
padding: 20px 0 0 0; } }
#colorlib-main-nav ul li {
padding: 0;
margin: 0;
list-style: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase; }
#colorlib-main-nav ul li a {
display: block;
color: white;
padding: 5px 0; }
#colorlib-main-nav ul li a span {
color: white;
position: relative;
padding: 0 10px; }
#colorlib-main-nav ul li a span small {
position: absolute;
bottom: 7px;
left: -30px;
font-size: 16px;
color: rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
outline: none;
text-decoration: none; }
#colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
#colorlib-main-nav ul li.active a span {
color: #f8b500; }
#colorlib-main-nav ul li.active a span:before {
background: #fec771;
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
header {
padding: 2em 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto; }
#media (max-width: 767.98px) {
header {
padding: 1em 0;
position: absolute; } }
header .colorlib-navbar-brand {
float: left; }
header .colorlib-navbar-brand .colorlib-logo {
font-size: 12px;
color: #fff;
letter-spacing: 5px;
font-weight: 600;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif;
text-transform: uppercase; }
header .colorlib-navbar-brand .colorlib-logo span {
font-size: 11px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 7px; }
header .colorlib-navbar-brand .colorlib-logo i {
color: #fec771;
position: absolute;
top: -18px;
bottom: 0;
left: 7px;
font-size: 48px; }
header .colorlib-navbar-brand .colorlib-logo:hover {
text-decoration: none !important; }
header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
outline: none;
text-decoration: none; }
.colorlib-nav-toggle {
cursor: pointer;
text-decoration: none; }
.colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
background: #000; }
.colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
background: #000; }
.colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
outline: none;
border-bottom: none !important; }
.colorlib-nav-toggle i {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
color: #000;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.menu-show .colorlib-nav-toggle i {
background: #fff;
color: #fff; }
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
content: '';
width: 30px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
.menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
background: #fff; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle.dark i {
position: relative;
color: #fff;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
background: #fff;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
#media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle i::before {
top: -7px; }
.colorlib-nav-toggle i::after {
bottom: -7px; }
.colorlib-nav-toggle:hover i::before {
top: -10px; }
.colorlib-nav-toggle:hover i::after {
bottom: -10px; }
.colorlib-nav-toggle.active i {
background: transparent; }
.colorlib-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.colorlib-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
.colorlib-nav-toggle {
float: right;
z-index: 1003;
position: relative;
top: 0;
right: 0;
display: block;
margin: 0 auto;
cursor: pointer;
margin-top: 0; }
#media (max-width: 767.98px) {
.colorlib-nav-toggle {
right: 10px; } }
.hero-wrap {
background: #202020; }
.hero-wrap .slider-text .desc h1 {
font-size: 6vw;
font-weight: 700;
color: #fff;
text-transform: uppercase; }
.hero-wrap .slider-text .desc h3 {
color: rgba(255, 255, 255, 0.8);
font-size: 18px; }
.footer-basic {
padding:40px 0;
background-color:#000;
/*color:#6b6c6d;*/
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:rgb(255, 255, 255);
margin-bottom:0;
}
/* Header: https://epicbootstrap.com/snippets/footer-basic */

Adding justify-content: center; to your <h1> element will make it centered.
So in your CSS file you could do this:
h1 {
font-family: "cf_glitch_cityregular";
justify-content: center;
}

justify-content Property
Please add the justify-content-center class on <h1> to Align the center.
Updated code :
<h1 id="h-100" class="h-100 row col-12 align-items-center text-center display-1 w-100 justify-content-center">VIRTUAL REALITY</h1>

CSS li elements won't display horizontally

I'm attempting to make the Nav li elements align side by side horizontally and not vertically. The Nav li elements also show a list style (bullet points) which should not show. However, after using display: inline-block; & list-style-type: none; my attempt fail?
CSS:
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
border-bottom: 0.5px solid rgba(0,0,0,.2);
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
display: inline-block;
background-color: #ffffff;
left:0;
top: 55px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 40px;
padding-bottom: 40px;
}
#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
list-style-type: none;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
.links{
color: #adadad;
}
/*----/----Panels*/
/*promo video scroll*/
#hero, section {
padding: 150px;
}
#scroll {
color: white;
font-size: 26px;
line-height: 26px;
cursor: pointer;
position: absolute;
left:50%;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
transition: transform 0.6s ease;
}
#scroll.clicked {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
#scroll.rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(3180deg);
}
#scroll span {
position: relative;
bottom: -10px;
}
.arrow-bounce {
-webkit-animation: arrow 1s infinite;
-moz-animation: arrow 1s infinite;
-o-animation: arrow 1s infinite;
animation: arrow 1s infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
#-webkit-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#-moz-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
/*----/----promo video scroll*/
/*contact panel*/
* {
font-family: "helvetica";
font-weight: normal;
font-size: 1em;
}
#wrapper {
width: 100%;
padding: 30px 20px;
text-align: center;
box-sizing: border-box;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #e6e8eb;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.module {
width: 100%;
margin: 1rem auto;
padding: 1rem;
}
.module fieldset {
overflow: hidden;
border: none;
}
.module fieldset [type="text"] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
line-height: 20px;
margin-bottom: 10px;
font-size: 1em;
background: transparent;
color: rgba(0,0,0,.4);
width: 50%;
padding: 0.5rem;
}
.single {
height: 25px;
}
.module fieldset textarea {
display: block;
width: 100%;
padding: 1rem;
height: 125px;
}
/*----/----contact form*/
/*social panel*/
.followcontainer {
text-align: center;
background: #ededed;
}
.follow {
left: 50%;
display: inline-block;
width: 175px;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
.followcopywright {
left: 50%;
display: inline-block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
/*social icons*/
.social-buttons {
height: 45px;
font-size: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
.social-button {
display: inline-block;
background-color: #ededed;
width: 45px;
height: 45px;
line-height: 45px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*----/----social panel*/
/*footer*/
footer {
float: left;
display: inline-block;
text-align: center;
background: 232,232,232,0;
border-top: 1px solid rgba(0,0,0,.2);
}
/*----/----footer*/
/****landscape****/
#media (min-width: 850px) {
}
/*----/----Landscape*/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<div class="nav">
<div id="navigation">
<ul>
<li class="navlist">Home</li>
<li class="navlist">About</li>
<li class="navlist">Work</li>
<li class="navlist">Contact</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce">↓</span>
</div>
</div>
<div class="panel" id="panel2">
<div class="inner">
Work Title 1
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
Work Title 2
</div>
</div>
<div class="panel" id="panel4">
<div class="inner">
Work Title 3
</div>
</div>
<div class="panel" id="panel5">
<div class="inner">
Work Title 4
</div>
</div>
<div class="panel" id="panel6">
<div class="inner">
Work Title 5
</div>
</div>
<div class="panel" id="panel7">
<div class="inner">
Work Title 6
</div>
</div>
<div id='wrapper'>
<input type='submit' value='Contact' id="changetext">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message' ></textarea>
<input type='submit' id="send">
</fieldset>
</div>
</div>
<div class="followcontainer">
<div class="follow"> <p>I'd love to hear from you.</p>Drop me a line at #email.com.Boost my ego with a Facebook like.And please stalk me on Instagram #instagram.</div>
</div>
<div class="social-buttons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-skype"></i>
</div>
<div class="followcontainer">
<div class="followcopywright">© Copywright 2015</div>
</div>

When displaying li items inline, you must set the CSS style to the li directly, not to the whole list.
Example:
.nav li{
display: inline-block;
}

CSS Border-Line won't display 100% width

I have placed a border-top in the CSS for #navpromo, however the border line will not display at full 100% width and is aligning to the right with space to the left of the page instead no matter what I try?
CSS:
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
border-bottom: 0.5px solid rgba(0,0,0,.2);
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: inline;
background-color: #ffffff;
left: 0;
top: 39px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav > li {
left: 0;
padding-top: 70px;
padding-bottom: 70px;
display: inline-block;
padding-right: 60px;
color: #545454;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 40px;
padding-bottom: 40px;
}
#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
.links{
color: #adadad;
}
/*----/----Panels*/
/*promo video scroll*/
#hero, section {
padding: 150px;
}
#scroll {
color: white;
font-size: 26px;
line-height: 26px;
cursor: pointer;
position: absolute;
left:50%;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
transition: transform 0.6s ease;
}
#scroll.clicked {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
#scroll.rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(3180deg);
}
#scroll span {
position: relative;
bottom: -10px;
}
.arrow-bounce {
-webkit-animation: arrow 1s infinite;
-moz-animation: arrow 1s infinite;
-o-animation: arrow 1s infinite;
animation: arrow 1s infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
#-webkit-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#-moz-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
/*----/----promo video scroll*/
/*contact panel*/
* {
font-family: "helvetica";
font-weight: normal;
font-size: 1em;
}
#wrapper {
width: 100%;
padding: 30px 20px;
text-align: center;
box-sizing: border-box;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #e6e8eb;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.module {
width: 100%;
margin: 1rem auto;
padding: 1rem;
}
.module fieldset {
overflow: hidden;
border: none;
}
.module fieldset [type="text"] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
line-height: 20px;
margin-bottom: 10px;
font-size: 1em;
background: transparent;
color: rgba(0,0,0,.4);
width: 50%;
padding: 0.5rem;
}
.single {
height: 25px;
}
.module fieldset textarea {
display: block;
width: 100%;
padding: 1rem;
height: 125px;
}
/*----/----contact form*/
/*social panel*/
.followcontainer {
text-align: center;
background: #ededed;
}
.follow {
left: 50%;
display: inline-block;
width: 175px;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
.followcopywright {
left: 50%;
display: inline-block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
/*social icons*/
.social-buttons {
height: 45px;
font-size: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
.social-button {
display: inline-block;
background-color: #ededed;
width: 45px;
height: 45px;
line-height: 45px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*----/----social panel*/
/*footer*/
footer {
float: left;
display: inline-block;
text-align: center;
background: 232,232,232,0;
border-top: 1px solid rgba(0,0,0,.2);
}
/*----/----footer*/
/****landscape****/
#media (min-width: 850px) {
}
/*----/----Landscape*/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<div id="navpromo">
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</div>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce">↓</span>
</div>
</div>
<div class="panel" id="panel2">
<div class="inner">
Work Title 1
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
Work Title 2
</div>
</div>
<div class="panel" id="panel4">
<div class="inner">
Work Title 3
</div>
</div>
<div class="panel" id="panel5">
<div class="inner">
Work Title 4
</div>
</div>
<div class="panel" id="panel6">
<div class="inner">
Work Title 5
</div>
</div>
<div class="panel" id="panel7">
<div class="inner">
Work Title 6
</div>
</div>
<div id='wrapper'>
<input type='submit' value='Contact' id="changetext">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message' ></textarea>
<input type='submit' id="send">
</fieldset>
</div>
</div>
<div class="followcontainer">
<div class="follow"> <p>I'd love to hear from you.</p>Drop me a line at #email.com.Boost my ego with a Facebook like.And please stalk me on Instagram #instagram.</div>
</div>
<div class="social-buttons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-skype"></i>
</div>
<div class="followcontainer">
<div class="followcopywright">© Copywright 2015</div>
</div>

Change the following:
CSS:
.nav {
position: fixed;
width: 100%;
text-align: center;
display: inline;
background-color: #ffffff;
left:-40px;
top: 39px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
clear:both;
}
.nav > li:last-child{
width:100%;
display:block;
}
HTML
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li></ul>
</div>
</li>
</ul>

You can also remove the padding from the ul.nav by adding the following style to the .nav class.
padding-left:0;
All ul elements have a default padding.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Why is my website slightly wider than the window? - html

You're using rows without using a container around them. The two elements have counterbalancing margins. See the docs and add either container or container-fluid to the parent of your rows. You should not have container classes on your columns. They're not needed there, even when nesting.

Related

How can i circle numbers around the circular menu

CSS - Adding menu icon causes problem with website layout

Headline isn't centered even though it has the text-center attribute

CSS li elements won't display horizontally

CSS Border-Line won't display 100% width

Categories

Resources