Заголовок html ошибок

Question

Я создаю меню для главной страницы своего сайта. Сначала я сделал это на чертеже, я хотел передать его html с помощью figma, это не go хорошо.

Теперь я хочу создать чистый код. Но и получается не так, как я хочу. ссылка: https://codepen.io/R3DW0LF/pen/ExVqYbo?

        <div class="page-header">
            <div class="page-content-wrap">
                <div class="page-header-content">
                    <div class="dyna_logo img kfuwufhd">
                        <span>Dynamo</span>
                    </div>
                    <div class="search__box">
                        <div class="srch_inpt" style="display: block;">
                            <input class="search_input efh473e" type="text" placeholder="Search">
                        </div>
                    </div>
                    <div class="inpts-tpbar">
                        <div class="tpbar login-top jfhejdyd" style="display: inline-flex;">
                            <div class="control-input login">
                                <a href="/signin">Hello</a>
                            </div>
                            <div class="control-input register">
                                <a href="/singup">Hello 2</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>`

Я хочу что-то вроде этого: Дизайн того, что я хочу

Answer 1

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #edeef0;
    font-family: system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans Cherokee", "Noto Sans Devanagari", "Noto Sans Ethiopic", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans Lao", "Noto Sans Osmanya", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", sans-serif;
}

.page-header {
    position: absolute;
    height: 54px;
    width: 100%;
}

.page-header-content {
    background: #4A76A8;
    width: 100%;
    display: inline-flex;
    padding: 10px;
}

.page-header-content .dyna_logo {
    /* position: absolute; */
    margin-left: 10%;
  margin-top:5px;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    /* identical to box height */
    color: #FFFFFF;
}

.search__box {
    margin-left: 10px;
    margin-top:5px;
}

.search__box .search_input {
    border: 0;
    width: 275px;
    line-height: 16px;
    transition: background-color 0.05s, color 0.05s;
    background: #224B7A url('/images/head_loupe.svg') no-repeat;
    background-position-x: left;
    background-position-y: 8px;
    background-position: left 8px;
    padding-left: 18px;
    border-radius: 14px;
}

.search__box .efh473e {
    box-sizing: border-box;
    height: 28px;
    line-height: 16px;
    color: #ddd;
    padding: 6px 6px 6px 19px;
    height: 28px;
    border: none;
    border-left: 8px solid transparent;
}

.search__box .efh473e:focus {
    outline: none;
    background-color: #fff;
    color: #000;
}

.tpbar .control-input {
    padding:5px;
}

.login-top .control-input > a {
  color:black;
  align-self: center !important; 
  text-decoration:none;
}


.linkButton{
  margin-top:3px;
  margin-left:15px;
  border-color:#f0f0f0;
  border-style:solid;
  height:16px;
  width:100px;
  background-color:#f0f0f0;
  color:black;
  text-align:center;
  align-self: center;
}

/* Responsive style */

@media screen and (max-width: 920px) {
    .inpts-tpbar {
        display: none;
    }
}

<section class="app">
  <div class="page-header">
    <div class="page-content-wrap">
      <div class="page-header-content">
        <div class="dyna_logo img kfuwufhd">
          <span>Dynamo</span>
        </div>
        <div class="search__box">
          <div class="srch_inpt" style="display: block;">
            <input class="search_input efh473e" type="text" placeholder="Search">
          </div>
        </div>
        <div class="inpts-tpbar">
          <div class="tpbar login-top jfhejdyd" style="display: inline-flex;">
            <div class="control-input linkButton">
              <a href="/signin">Sign in</a>
            </div>
            <div class="control-input linkButton">
              <a href="/singup">Sign Up</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

Вы можете использовать flex для разделения содержимого вашей страницы, вы можете попробовать justify-content:

.separate{
display: flex;
justify-content: space-between;
}