Переместить текст в элемент <header>

Question

Итак, у меня есть тег <nav> в теге <header>, но он странно вверху, но мне нужно, чтобы он был внизу.

Вот что мне нужно, чтобы он выглядел как:

И вот как это выглядит:

Вот код CSS для кнопок и заголовка, в котором он находится.

#header {
    background-color: #886D75;
    position: absolute;
    left: 10px;
    top: 0px;
}

#nav {
    text-align: right;
    float: right;
}

А вот HTML.

    <header id="header">
        <img id="logo" src="images/logo.png" alt="kasacast logo">
        <nav id="nav">
            <a href="home.html" id="home" class="nav">home&nbsp;</a>
            <a href="help.html" id="help" class="nav">help&nbsp;</a>
            <a href="https://app.tutturu.tv" id="tutturu" class="nav">tutturu&nbsp;</a>
            <a href="stream.html" id="stream" class="nav">stream&nbsp;</a>
            <a href="about.html" id="about" class="nav">about&nbsp;</a>
        </nav>
    </header>

Answer 1

Я исправил это, выполнив:

float: right;
padding-top: 18px;
padding-right: 20px;

Это дало мне результаты, которые я хотел.

Answer 2

Хотя здесь уже есть ответ, я даю более простое решение. Вы можете просто использовать padding

#header {
    background-color: #886D75;
    position: absolute;
    left: 10px;
    top: 0px;
    padding-top:10px; 
}

#nav {
    text-align: right;
    float: right;

}

Узнайте больше о padding здесь: Ссылка

Надеюсь, это поможет!

Answer 3

Не уверен, что это то, что вам нужно:

body {
  margin: 0;
  padding: 0;
}

#header {
  background-image: url("https://i.pinimg.com/originals/75/2b/67/752b67b53f06b3707f133f8e81862ab8.jpg"); /* Use any image you need */
  background-repeat: none;
  background-size: cover;
  height: 100vh;
}

#header #nav {
  align-items: center;
  background-color: red;
  display: flex;
  padding: 10px;
  justify-content: space-between;
}

#header #nav #logo {
  width: 50px;
  height: auto;
}

#header #nav a {
  color: white;
  font-family: Arial; /* Change to whatever font you need */
  padding: 10px;
  text-decoration: none;
}

    <header id="header">
        <nav id="nav">
            <!-- I'm just using a logo I have to load the image, replace it with your own again -->
            <img id="logo" src="https://avatars2.githubusercontent.com/u/34989646?s=400&u=0bfacebf46980e16c03c3dfe62cc34e209be9e06&v=4" alt="kasacast logo"> 
            <div id="navitems">
                 <a href="home.html" id="home" class="nav">home&nbsp;</a>
                 <a href="help.html" id="help" class="nav">help&nbsp;</a>
                 <a href="https://app.tutturu.tv" id="tutturu" class="nav">tutturu&nbsp;</a>
                 <a href="stream.html" id="stream" class="nav">stream&nbsp;</a>
                 <a href="about.html" id="about" class="nav">about&nbsp;</a>
            </div>
        </nav>
    </header>

Answer 4

Если я пойму, это поможет. Вот некоторая информация об этом: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

header {
      width: 100%;
      height: 50px;
      background-color: red;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }