We Keep Coding

Why top div and bottom div is not getting height and width?

As you can see i used the intersection observer to change the background when the specific div comes in middle of the screen.
The issue i'm facing here is that i want to add other sections too outside of .main on top and bottom of the .main section. Stand alone the .main section is working okay. But when i add the other divs outside the main section. They don't take take height and width. I want main section works stand alone with others divs in my website page.
const bgEl = document.querySelector(".BG");
function createObserver(el) {
let observer;
let options = {
root: null,
rootMargin: "0px",
};
function handleIntersect(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const url = entry.target.getAttribute("BGurl");
bgEl.style.backgroundImage = `url(${url})`;
}
});
}
observer = new IntersectionObserver(handleIntersect, options);
observer.observe(el);
return observer;
}
(function () {
const sections = document.querySelectorAll(".main .section");
const observers = Array.from(sections).map(function (section) {
createObserver(section);
});
})();
* {
margin: 0px;
padding: 0px;
}
.section {
height: 100vh;
top: -611px;
width: 100%;
display: flex;
z-index: 1;
position: relative;
background-size: 100% 100% !important;
}
.text {
margin: auto;
}
.text p {
font-family: "Lato";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 149%;
color: #263244;
}
.text h1 {
margin-bottom: 20px;
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 0px;
color: #ffffff;
margin-bottom: 50px;
}
.text .story-detail {
width: 300px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.text .story-description {
width: 321px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.BG {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
opacity: 1;
top: 0px;
transition: opacity 10s ease-in-out;
background-size: cover;
background-repeat: no-repeat;
}
.main {
width: 100%;
height: 100vh;
}
<div style="height: 700px; width: 100%"></div>
<div class="main">
<div class="BG"></div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<h1>Our Story</h1>
<div class="story-detail">
<p>
We saw a gap between what people need and what banks offer. It
means millions of us aren't getting the banking experience we
deserve for different reasons.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/9QYL3ytR/mobile-camp.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
Traditional banks don’t focus on customers' experience, their
systems may be slow and outdated, they may prioritize a specific
group of people, or perhaps they lack the ability to innovate,
and so on.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/cLPLS8xW/mobile-desert.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
So since we're passionate about solving problems and bridging
gaps, we looked into and identified the challenges and
capabilities we'll need to build a bank here in the Kingdom.
</p>
</div>
</div>
</div>
</div>
<div
class="section"
BGurl="https://i.postimg.cc/mZnqV38T/mobile-birds.png"
>
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
With the best local and international expertise, we began
building an innovative digital bank designed by and for the
people. We believe that the most effective way to build a bank
for people is to do it with them. This is our philosophy. So, we
started building it with the help of people like you.
</p>
</div>
</div>
</div>
</div>
<div class="section" BGurl="https://i.postimg.cc/k513m0Fb/mountain.png">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
At D360, innovation starts with someone’s passion for improving
financial services. To that person, we say: Never stop offering
solutions to your needs. These solutions will not only benefit
you, but will significantly impact the lives of millions.
</p>
</div>
</div>
</div>
</div>
</div>
<div style="height: 700px; width: 100%"></div>
<footer style="height: 800px ;width: 100%" >
</footer>

Why does my javascript slideshow not work and result in a "Cannot set properties of undefined(setting 'className')?

I am trying to create a slideshow in javascript, where pressing the 'next' and 'previous' buttons should take you to the next and previous slides.
When I run the code, the slideshow doesn't work, instead, the new "slides" end up coming below the existing slide. Apart from this, there is an error, "Cannot set properties of undefined (setting 'className')".
Here is my html:
<div id="slideshow_container">
<!-- This is the start of the slideshow-->
<div id="bg" class="slide_active"> <!-- First slideshow element -->
<div id="info">
<br><br>
<section class="who">
<h2>
Who are we?
</h2> <br>
<p>
We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here!
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Story
</h2>
</section>
<br><br>
<section class="who">
<h2>
Our Misssion
</h2>
<br>
<p>
To unite the Bangladeshi community in Oman
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Vision
</h2>
<br>
<p>
To reach out to all Bengali people living in Oman.
</p>
</section>
</div>
<a id="prev" onclick="Prev_Slide(1)">Previous</a>
<a id="next" onclick="Next_Slide(1)">Next</a>
</div>
<div id="message_div" class="slide"><!-- Second slideshow element -->
<br><br>
<h2 id="message">
Message from our CEO
</h2>
<p id="belief">
Our CEO believes....
</p>
</div>
<div id="members" class="slide">
<h2 id="member_head">
Our members...
</h2>
</div>
Here is my css:
#img{
width: 100%;
height: 100%;
object-fit: fill;
}
#info{
width: 600px;
position: absolute;
left: 500px;
background-color: red;
}
.who{
height: auto;
text-align: center;
font-family: Comic Sans MS;
}
h2{
font-weight: bold;
}
#bg{
background-color: green;
width:1600px;
height: 619px;
}
#prev{
position:relative;
top:575px;
left:10px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#next{
position:relative;
top:575px;
left:1400px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#slideshow_container{
width: 1600px;
height: 619px;
position:relative;
}
.slide{
display:none;
object-fit: fill;
}
.slide_active{
display:block;
}
#message_div{
text-align: center;
}
#belief{
text-align: center;
}
And finally, here is my javascript:
let Slide_number = 1;
show_slides(Slide_number);
function Next_Slide(n){
show_slides(Slide_number += n);
}
function Prev_Slide(n){
show_slides(Slide_number -= n);
}
/* Literally the slide number(not indexed) */
function show_slides(n){
let i;
let slides = document.getElementsByClassName("slide");
if (n>slides.length){
Slide_number = 1;
}
if (n<1){
Slide_number = slides.length
}
for(i=0; i<slides.length; i++){
slides[i].className = "slide";
}
slides[Slide_number-1].className = "slide_active";
}
Can someone please help me out with exactly what is wrong with my approach? I do not understand the issue. I am using bootstrap, but I don't think that would interfere with my code much.

You are replacing the classnames of the sildes every time you click on anchor tag. You need addition assignment operator += and a space for
it. So you can add class to that element.
You can also use classList.add() method.
slides[Slide_number - 1].classList.add("slide_active");
let Slide_number = 1;
show_slides(Slide_number);
function Next_Slide(n) {
show_slides(Slide_number += n);
}
function Prev_Slide(n) {
show_slides(Slide_number -= n);
}
function show_slides(n) {
let slides = document.getElementsByClassName("slide");
if (n > slides.length) Slide_number = 1;
if (n < 1) Slide_number = slides.length;
console.log(Slide_number);
for (let i = 0; i < slides.length; i++) {
slides[i].className = "slide";
}
slides[Slide_number - 1].className += " slide_active";
}
#img {
width: 100%;
height: 100%;
object-fit: fill;
}
#info {
width: 600px;
position: absolute;
left: 500px;
background-color: red;
}
.who {
height: auto;
text-align: center;
font-family: Comic Sans MS;
}
h2 {
font-weight: bold;
}
#bg {
background-color: green;
width: 1600px;
height: 619px;
}
#prev {
position: relative;
top: 575px;
left: 10px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#next {
position: relative;
top: 575px;
left: 1400px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#slideshow_container {
width: 1600px;
height: 619px;
position: relative;
}
.slide {
display: none;
object-fit: fill;
}
.slide_active {
display: block;
}
#message_div {
text-align: center;
}
#belief {
text-align: center;
}
<div id="slideshow_container">
<!-- This is the start of the slideshow-->
<div id="bg" class="slide_active">
<!-- First slideshow element -->
<div id="info">
<br><br>
<section class="who">
<h2>
Who are we?
</h2> <br>
<p>
We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here!
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Story
</h2>
</section>
<br><br>
<section class="who">
<h2>
Our Misssion
</h2>
<br>
<p>
To unite the Bangladeshi community in Oman
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Vision
</h2>
<br>
<p>
To reach out to all Bengali people living in Oman.
</p>
</section>
</div>
<a id="prev" onclick="Prev_Slide(1)">Previous</a>
<a id="next" onclick="Next_Slide(1)">Next</a>
</div>
<div id="message_div" class="slide">
<!-- Second slideshow element -->
<br><br>
<h2 id="message">
Message from our CEO
</h2>
<p id="belief">
Our CEO believes....
</p>
</div>
<div id="members" class="slide">
<h2 id="member_head">
Our members...
</h2>
</div>

Put your script just before the end of your body tag. If not you will get the undefined message. Why? Because your by that time DOM is already loaded and ready for manipulation so you will have access to any element you wish to manipulate.
As for your slide showing under other, here is the working solution. When you add a classname with JS, if you want to replace an existing classname you can use = but if you want to add to an existing class, you need to keep a space before it
and use += so that you don't overwrite the already existing class and you will have class="existingclass addedclass". Also modified css, you can read the comment at the top. Also I have taken out next and previous button out of #bg div and placed it inside container directly, since it is a slide itself, your next slide won't be able to see those buttons. That's all. You can run the code directly to see it for yourself.
let Slide_number = 1;
show_slides(Slide_number);
function Next_Slide(n){
show_slides(Slide_number += n);
}
function Prev_Slide(n){
show_slides(Slide_number -= n);
}
/* Literally the slide number(not indexed) */
function show_slides(n){
let i;
let slides = document.getElementsByClassName("slide");
if (n>slides.length){
Slide_number = 1;
}
if (n<1){
Slide_number = slides.length
}
for(i=0; i<slides.length; i++){
slides[i].className = "slide";
}
// keep space before slide_active and use += instead
slides[Slide_number-1].className += " slide_active";
}
/* gave slide container a green background so that you will be able to see white next and prev text, also removed style for #bg since it is a slide itself */
#img{
width: 100%;
height: 100%;
object-fit: fill;
}
#info{
width: 600px;
position: absolute;
left: 500px;
background-color: red;
}
.who{
height: auto;
text-align: center;
font-family: Comic Sans MS;
}
h2{
font-weight: bold;
}
#prev{
position:relative;
top:575px;
left:10px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#next{
position:relative;
top:575px;
left:1400px;
font-family: Segoe Print;
font-weight: bold;
color: white;
}
#slideshow_container{
width: 1600px;
height: 619px;
position:relative;
background-color: green;
}
.slide {
display:none;
object-fit: fill;
}
.slide_active{
display:block;
}
#message_div{
text-align: center;
}
#belief{
text-align: center;
}
<div id="slideshow_container">
<a id="prev" onclick="Prev_Slide(1)">Previous</a>
<a id="next" onclick="Next_Slide(1)">Next</a>
<!-- This is the start of the slideshow-->
<div id="bg" class="slide"> <!-- First slideshow element -->
<div id="info">
<br><br>
<section class="who">
<h2>
Who are we?
</h2> <br>
<p>
We are the organisation responsible for bringing together the Bangladeshi community in Oman. By hosting a wide range of events and gatherings, we ensure that everyone from Bangladesh is kept engaged here!
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Story
</h2>
</section>
<br><br>
<section class="who">
<h2>
Our Misssion
</h2>
<br>
<p>
To unite the Bangladeshi community in Oman
</p>
</section>
<br><br>
<section class="who">
<h2>
Our Vision
</h2>
<br>
<p>
To reach out to all Bengali people living in Oman.
</p>
</section>
</div>
</div>
<div id="message_div" class="slide"><!-- Second slideshow element -->
<br><br>
<h2 id="message">
Message from our CEO
</h2>
<p id="belief">
Our CEO believes....
</p>
</div>
<div id="members" class="slide">
<h2 id="member_head">
Our members...
</h2>
</div>

Creating multiple Modals for many different pictures

I have a modal that contains many different items(Menu items). I want to make it so when I click the heading of any specific menu item, another modal pops-up showing the image of said dish. The only issue I run into, is that I would have to create a ton of different modals for each item dish(15 of them). IS there a way I can create a function/loop fthem so they only access a soecific image attatched to said item? Should I create a seperate container for the images? Or add them to the item containers themselves and set the display to none?
Here is an example without much css or the JS with it? Any thoughts of the best way to tackle this?
/*This is the background/ not the box itself*/
.menu {
display: block;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: rgba(0, 0, 0, .4);
}
/*Menu Content Box*/
.menuContent {
background-color: #f1e3cb;
margin: 5% auto;
border: 1px solid #888;
width: 50%;
height: 80%;
border-radius: 5px;
font-family:'IM Fell French Canon SC', serif;
font-weight: 600;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: #f1e3cb;
}
&::-webkit-scrollbar-thumb {
background: #888;
}
.menuHeader {
text-align: center;
}
.menu-items {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px 0 0;
> div {
width: 33%;
margin: 0 5px;
}
p{
text-align: left;
&:hover {
cursor: pointer;
transform: scale(1.1);
transform-origin: left;
}
}
.item {
margin-top: 20px;
align-self: center;
}
}
}
/*Close button*/
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
padding-right: 10px;
overflow: auto;
&:hover,
&:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
}
<!--Menu Modal-->
<div id="myMenu" class="menu">
<!--Menu Content-->
<div class="menuContent">
<span class="close">×</span>
<div class="menuHeader">
<h1>Menu</h1>
</div>
<div class="menu-items">
<div class="Appetizers">
<h2>Appetizers</h2>
<div class="item">
<p>Sardine canapés:</p>
<small>Roasted sardines, boiled egg yolk, whole olives, and a choice of cheese stacked
on our signature house bread.
</small>
</div>
<div class="item">
<p>Crab Stuffed with Crayfish:</p>
<small>Fried crab and vegetables stuffed into large crayfish.</small>
</div>
<div class="item">
<p>Shrimp Canapés:</p>
<small>Lemon fried shrimp, cucumber slicies atop house bread served with a side of
our shrimp sauce.
</small>
</div>
<div class="item">
<p>Préfou:</p>
<small>House baguette stuffed with garlic butter and parsely.</small>
</div>
<div class="item">
<p>Moules farcies:</p>
<small>baked mussels stuffed with garlic butter, parsley, shallots and nutmeg. Topped with
parmesan cheese and breadcrumbs .
</small>
</div>
</div>
<div class="Entrees">
<h2>Entrees</h2>
<div class="item">
<p>Lamb chops & Cognac dijon:</p>
<small>Juicy lamb elegantly served with our signature Dijon sauce</small>
</div>
<div class="item">
<p>Chicken Cordon Bleu:</p>
<small>Chicken stuffed with ham and cheese sauce, served atop a bed of roasted lettuce.</small>
</div>
<div class="item">
<p>Coq au vin:</p>
<small>Chicken drums braised with wine, mushrooms, pork and garlic butter. Topped with
green onion and chili, and a side of roasted scallops.
</small>
</div>
<div class="item">
<p> Ratatouille:</p>
<small>Award winning dish. Shallow fried vegetables layered in our signature baked casserole.
</small>
</div>
<div class="item">
<p>Roast Chicken:</p>
<small>Cuts of chicken roasted in garlic butter and an herby crust served with roasted baby spinach.</small>
</div>
<div class="item">
<p>Duck a l'orange:</p>
<small>Duck legs and breast served with fresh orange sauce.</small>
</div>
<div class="item">
<p>Croque-Monsieur:</p>
<small>Baked ham and cheese with velvety bechamel. Served with egg upon request.</small>
</div>
</div>
<div class="Desserts">
<h2>Desserts</h2>
<div class="item">
<p>Apricot and Almond Galette:</p>
<small>Fruity galettes stuffed with an almond cream.</small>
</div>
<div class="item">
<p>Honey Hazelnut Financiers:</p>
<small>Buttery brown cakes tops with a berry-hazelnut topping.</small>
</div>
<div class="item">
<p>Caramelized-Honey Brulee:</p>
<small>House Brulee coated with a caramelized layer of torched honey.</small>
</div>
</div>
</div>
</div>

You don't need a separate modal for each image. You just need a one modal that will display different images.
Using javascript, you need to add a click event listener to the container of all the items. When any items is clicked, get the src attribute of the img element associated with that item and set this src attribute as the src attribute of the img in the modal.
Here's a demo in which i have 3 images which are displayed in a modal one at a time depending on which image label you clicked on.
const modal = document.getElementById('modal');
const modalContainer = document.querySelector('.modal-container');
const container = document.getElementById('container');
container.addEventListener('click', (event) => {
if (event.target.matches('span')) {
const src = event.target.nextElementSibling.getAttribute('src');
modal.children[0].setAttribute('src', src);
modalContainer.classList.add('showModal');
}
});
modalContainer.addEventListener('click', () => {
modalContainer.classList.remove('showModal');
})
body { margin: 0; }
img { display: none; }
div span {
display: inline-block;
margin: 5px;
font-size: 1.2rem;
cursor: pointer;
text-decoration: underline;
color: blue;
}
.modal-container {
display: none;
position: fixed;
background: #222;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
}
.modal-container img { display: inline-block; }
.showModal { display: flex; }
<div class="modal-container">
<div id="modal">
<img src="" />
</div>
</div>
<div id="container">
<div>
<span>Show Image 1</span>
<img src="https://picsum.photos/id/1/200/" />
</div>
<div>
<span>Show image 2</span>
<img src="https://picsum.photos/id/20/200/" />
</div>
<div>
<span>Show image 3</span>
<img src="https://picsum.photos/id/30/200/" />
</div>
</div>

How do I have a navbar and body loaded from other html and update by the navbar?

So I have an index page with some bootstrap code to make the columns resize. I want to have a navbar on the left side and the body for the rest. However, I want to have more than one navbar. I want to create a few categories across the top and depending on which one of those you choose, it will load a navbar and a default body page into the bootstrap columns. It's for a tabletop RPG that I am writing.
So if I have Character Creation, Combat, Magic, Vehicles, etc. across the top and you click on Character Creation then it will load the navbar on the left for character creation and the main body would have a default overview page. If you click a link in the navbar, I want it to change the page on the main body.
I know how to do this the slow way and create a huge number of pages with all the navbars and such already in there. If I update one section, I have to go through and update dozens of pages.
I am trying to teach myself javascript and I know that I can do it in there but I am not sure how.
I can't seem to find an example of this to figure out the coding. I assume that there would be a variable that is being changed by the navbar when you click on the navbar links? Not sure.
This is what I have for the test index page:
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<h1>This is Test 4</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="Navbar" data-source="navBar.html"></div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="mainBody" data-source="test3.html"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

I have written a basic JS example for you below which will work ok in a small project, however it would not scale well in a larger project. You would be better learning a framework like vue.js and using the router along side it, or just using a router like the one Jon B linked you to in his comment above.
Anyway, something this will get you going. I have included a couple tricks which you will likely use in the future, for example data attributes, foreach loops and querySelectors and updating the dom. Let me know if you have any questions and enjoy Javascript :)
// Get all the nav items
var navItems = document.querySelectorAll(".nav-item");
var sideNavTitelEl = document.getElementById('side-nav-title');
var containersEls = document.querySelectorAll(".content");
// selected will be set to the nav item that was clicked on
var selected = 0;
// Add an event listener to all the nav items
navItems.forEach(addingEventListener);
function addingEventListener(item, index) {
item.addEventListener('click', function() {
// the item is what nav item we clicked on,
// lets set the side nav and main container value to be what was clicked on
sideNavTitelEl.innerHTML = item.innerHTML;
// Now lets update the main page container
selected = parseInt(item.dataset.value);
// We use the displayNone to show / hide a container.
// In a large scale project, you will want to begin to look at using a router, as this will speed
// up your site. For this example, it will work fine as is here.
// Hide and show the correct content on page
containersEls.forEach(hideContent);
});
}
function hideContent(item, index) {
if(index === selected) {
// we want to show this container
item.classList.remove('displayNone');
} else {
// hide the container
item.classList.add('displayNone');
}
}
body {
box-sizing: border-box;;
margin: 0;
padding: 0;
position: relative;
}
.top-nav {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
margin-left: 30px;
margin-right: auto;
}
.nav-item {
margin-left: auto;
margin-right: 30px;
}
.nav-item:hover {
cursor: pointer;
}
.side-nav {
width: 200px;
height: calc(100vh - 60px);
position: absolute;
top: 60px;
left: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.main-container {
width: 200px;
height: 200px;
background-color: yellow;
margin-left: 200px;
width: calc(100% - 200px);
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.displayNone {
display: none;
}
.container-one {
background-color: red;
}
.container-two {
background-color: green;
}
.container-three {
background-color: blue;
}
<div class="top-nav">
<p class="logo">Home</p>
<p class="nav-item item-1" data-value='0'>Item 1</p>
<p class="nav-item item-2" data-value='1'>Item 2</p>
<p class="nav-item item-3" data-value='2'>Item 3</p>
</div>
<div class="side-nav">
<p id="side-nav-title">Home</p>
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
<div class="main-container">
<div class="content container-one" data-value='1'>
<h1>Container 1</h1>
</div>
<div class="content container-two displayNone" data-value='2'>
<h1>Container 2</h1>
</div>
<div class="content container-three displayNone" data-value='3'>
<h1>Container 3</h1>
</div>
</div>

Centralising nested Divs which have onclick elements

I have 2 rows, one which needs two images and the other which needs to show information if those images are clicked.
I'm having an issue centralising the images and text within the row div.
<div id="container">
<!-- Image row -->
<div class="row">
<div class="col-md-6">
<div id="badbutton"></div>
</div>
<div class="col-md-6">
<div id="goodbutton"></div>
</div>
</div>
<!-- Text Row -->
<div class="row">
<div class="col-md-6">
<div id="bad" style="display:none;">
<p>Oh no! We'd appreciate it if you'd share your experience with us so we can improve in the future. Just click below to get started.</p>
<p> FORM HERE </p>
</div>
</div>
<div class="col-md-6">
<div id="good" style="display:none;">
<p>Fantastic! Please share your experience with the world on of these popular websites. Just make a selection below to get started.</p>
<ol>
<li>Click here to review us on Google+ Reviews</li>
<li>Click here to review us on Facebook</li>
</ol>
</div>
</div>
</div>
</div>
What's happening is the col-md-6 takes up 45% of the row div but the buttons inside aren't centralising themselves.
Here is the CSS:
.row {
margin: 0 auto;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-md-6 {
width: 45%;
}
#good,
#bad {
width: 50%;
}
Here is the outcome:

Try using display:table-* it will make your elements behavior like a table.
.row {
margin: 0 auto;
display: table-row;
}
.col-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
display: table-cell;
text-align: center;
vertical-align: middle;
}

Give style "text-align:center" to the "col-md-6" div. And display: inline-block to #goodbutton and #badbutton.
Just for example
#badbutton, #goodbutton {
height: 50px;
width: 50px;
display: inline-block;
background: #444;
vertical-align: middle;
}
Sample fiddle here
http://jsfiddle.net/Lw27ofb1/