Solution 1 :

You can use position: absolute to position “hello” like so:

#navbar {
  color: black;
  width: auto;
  position: absolute;
  margin: 0;
  left: 20px;
  top: 20px;
}

See working example here: https://jsfiddle.net/n75cqgo3/

Solution 2 :

Edit:

Remove the margins from your p and h1 tags, those are what were pushing your text off screen.

The style rules for #navbar can also be deleted:

.left-side {
  background: white;
  width: 50%;
  height: 100%;
  left: 0;
  bottom: 0;
  color: black;
  position: absolute;
}

.right-side {
  background: black;
  width: 50%;
  height: 100%;
  right: 0;
  bottom: 0;
  color: white;
  position: absolute;
}

.left-side,
.right-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  text-align:center;
}

h1 {
  font-size: 32px;
  font-weight: 700;
}

p {
  font-size: 18px;
  font-weight: 300;
}

h1,p{
  margin:0
}

/*#navbar {
  color: black;
  width: auto;
  float: left;
  top: 0;
}*/
<div class="left-side">
  <p id="navbar">Hello</p>
  <h1>Welcome.</h1>
  <p>I want to welcome you!</p>
</div>
<div class="right-side">
  <h1>Corey M.</h1>
  <p>Corey is my name :)</p>
</div>

Solution 3 :

I think the reason Hello doesn’t appear top left is due to the css rule you have for .leftside.

.left-side,
.right-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  text-align:center;
}

This rule says that all items are aligned to the center and your hello is in the leftside div.

Problem :

I want to create a menu bar at the top left where each button is just a word, but I can’t get the word to go to the top left of the screen. I don’t know if it has something to do with the flexbox… Any suggestions?

enter image description here

.left-side {
  background: white;
  width: 50%;
  height: 100%;
  left: 0;
  bottom: 0;
  color: black;
  position: absolute;
}

.right-side {
  background: black;
  width: 50%;
  height: 100%;
  right: 0;
  bottom: 0;
  color: white;
  position: absolute;
}

.left-side,
.right-side {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

h1 {
  font-size: 72px;
  font-weight: 700;
}

p {
  font-size: 48px;
  font-weight: 300;
}

#navbar {
  color: black;
  width: auto;
  float: left;
  top: 0;
}
<div class="left-side">
  <p id="navbar">Hello</p>
  <h1>Welcome.</h1>
  <p>I want to welcome you!</p>
</div>
<div class="right-side">
  <h1>Corey M.</h1>
  <p>Corey is my name :)</p>
</div>

Comments

Comment posted by CIA11

It works if you add a z-index on it too so thank you! Only thing however is when I add multiple

elements, they go below each other instead of to the right, do you know how to fix that too?

Comment posted by Will

I’m not sure I understand what you’re trying to do. If you add a

tag after say “Corey is my name” you want it so be placed right after that welcome message, in line?

Comment posted by CIA11

Oh I’m sorry, I meant in navbar but I fixed it by doing display: flex; align-items: center; flex-direction: row; justify-content: center; and adding padding: 10px;

By