Почему «Привет» не go вверху слева?

Question

Я хочу создать строку меню в левом верхнем углу, где каждая кнопка - просто слово, но я не могу получить слово для go в левом верхнем углу экрана. Я не знаю, имеет ли это какое-то отношение к flexbox ... Есть предложения?

.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>

Answer 1

Вы можете использовать position: absolute для позиционирования "привет" следующим образом:

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

См. Рабочий пример здесь: https://jsfiddle.net/n75cqgo3/

Answer 2

Я думаю, что причина, по которой Hello не отображается в верхнем левом углу, связана с правилом css, которое вы используете для .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.

Answer 3

Редактировать:

Удалите поля из ваших тегов p и h1, это то, что отталкивало ваш текст от экрана.

Правила стиля для #navbar также можно удалить:

.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>