Adding a nav issues

[Edrol97]

Hi all, I've made a Jokes page for my site, but it aligns a navbar to the left when I try and add it in the body. Does anyone know how I can prevent this?

@font-face {
  font-family: Eliot;
  src: url(Fonts/Eliothand2-Regular.otf);
}

@font-face {
  font-family: Eliot Headline;
  src: url(Fonts/EliotHeadline-Regular.ttf);
}

body {
  margin: 0;
  background-image: url(img/background/Laugh.svg);
  background-repeat: repeat;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
}

button {
  cursor: url(img/background/cursors/pointer1.png), pointer;
}

.jokecontainer {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 1);
  border-radius: 15px;
  width: 85%;
  text-align: center;
  color: black;
}

.heading {
  font-size: 25px;
  font-weight: 200;
  font-family: Eliot Headline;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

.joke {
  font-family: Eliot;
  font-size: 40px;
  font-weight: 500;
  margin: 40px;
}

.btn {
  font-size: 18px;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  width: 300px;
  color: darkgreen;
}

.btn:hover {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  transition: all 300ms ease;
  cursor: url(img/background/cursors/pointer1.png), pointer;
}

Here's a link with minimal JS on it and no JSON

 

[tomliv]

@Edrol97 A bit tough without a page to inspect, but a quick look makes me think it's because you have display: flex; on the body and by default, flex-direction is row.

 

[Edrol97]

@Edrol97 A bit tough without a page to inspect, but a quick look makes me thing it's because you have display: flex; on the body and by default, flex-direction is row.

Taking off flex mucks it up though with the body. This is how it should look.
And this is what it becomes when taking flex off the even if the same settings are added to the individual divs

The former is how I want it to look, although I don't know how I get this without the navbar going wrong.

 

[Edrol97]

@Edrol97 A bit tough without a page to inspect, but a quick look makes me thing it's because you have display: flex; on the body and by default, flex-direction is row.

Hi Tom, there is now a Codepen link in the main post to inspect

 

[tomliv]

@Edrol97 Try adding flex-direction: column; to body styles. Is that what you are after? The photos you posted didn't include the nav, so not sure where you want it to be.

 

[Edrol97]

@Edrol97 A bit tough without a page to inspect, but a quick look makes me thing it's because you have display: flex; on the body and by default, flex-direction is row.

Seem to have sorted it. It looks how I want it to look now.