Некликабельное поле ввода

Question

Подскажите пожалуйста как исправить этот код или скажите что с ним конкретно не так. Почему то когда пытаюсь нажать в поле ввода не вижу курсора текстового и вообще не могу ничего в это поле вписать, как в принципе и кнопку button не могу нажать. В принципе если немного опустить вниз form то поле ввода начинает работать и можно вводить текст и нажимать кнопку но мне нужно что бы оба хэдэра были на одном уровне. Да я знаю что много divов в документе это плохо выглядит я работаю над тем чтобы количевство дивов ограничивать.

.page {
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family:  Times, "Times New Roman", serif;
  line-height: 1.52;
  color: black;
}
.header-left {
  position: relative;
}
.header_picture > img{
  float: left;
  margin: -2.5em 0.25em 0 3em;
  z-index: -1;
}
.header-documentation {
  font-size: 2em;
  border-left: 2px solid black;
  display: inline-block;
  padding: 20px 0 5px 30px;
  font-weight: 700;
}
.link {
  line-height: 18px;
  text-decoration: none;
}
.link_color_orange{
  color: #fe5000!important;
}
.header-right{
  float: right;
  padding-top: -5px;
}
.header-search {
  float: right;
  margin-top: -50px;
  margin-right: 100px;
}
.search-text-input {
  padding: 5px;
  border-top:1px solid #eee;
  border-radius: 5px;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
  box-sizing: border-box;
  width: 390px;
  height: 35px;
  cursor: auto;
}
.submit-button {
padding:5px;
background-color:orange;
color:white;
border-radius:10px;
height: 35px;
width: 50px;
cursor: pointer;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Technical documentation</title>
  </head>
  <body>
  <div class="page">
   <header class="page-header">
     <div class="header-left">
 <a class="header_picture" href="https://pl.wikipedia.org/wiki/Klepsydra" title="klepsydra"><img src="historical-klepsydra_318-10279.jpg" alt="Klepsydra" width="150" height="150"></a>
     <div class="header-documentation"> 
 <a class="link link_color_orange" href="https://en.wikipedia.org/wiki/Documentation">Documentation</a>
     </div>
    </div>
    <div class="header-right">
    <form class="header-search" action="action_page.php">
      <input type="text" class="search-text-input" placeholder="Search through documentation..." name="search">
      <button class="submit-button" type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
  </header>

Answer 1

Форма с инпутом и кнопкой накрыта блоком .header-left.

.page {
  height: 100%;
  margin: 0px;
  padding: 0px;
  font-family: Times, "Times New Roman", serif;
  line-height: 1.52;
  color: black;
}

.header-left {
  float: left;
}

.header_picture>img {
  float: left;
  margin: -2.5em 0.25em 0 3em;
  z-index: -1;
}

.header-documentation {
  font-size: 2em;
  border-left: 2px solid black;
  display: inline-block;
  padding: 20px 0 5px 30px;
  font-weight: 700;
}

.link {
  line-height: 18px;
  text-decoration: none;
}

.link_color_orange {
  color: #fe5000!important;
}

.header-right {
  float: right;
}

.header-search {
}

.search-text-input {
  padding: 5px;
  border-top: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  width: 390px;
  height: 35px;
  cursor: auto;
}

.submit-button {
  padding: 5px;
  background-color: orange;
  color: white;
  border-radius: 10px;
  height: 35px;
  width: 50px;
  cursor: pointer;
}

<div class="page">
  <header class="page-header">
  
    <div class="header-left">
      <a class="header_picture" href="https://pl.wikipedia.org/wiki/Klepsydra" title="klepsydra"><img src="historical-klepsydra_318-10279.jpg" alt="Klepsydra" width="150" height="150"></a>
      <div class="header-documentation">
        <a class="link link_color_orange" href="https://en.wikipedia.org/wiki/Documentation">Documentation</a>
      </div>
    </div>
  
    <div class="header-right">
      <form class="header-search" action="action_page.php">
        <input type="text" class="search-text-input" placeholder="Search through documentation..." name="search">
        <button class="submit-button" type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>

  </header>
</div>

Answer 2

Проблема решена достаточно было поменять главный header на div а класс .header-left на .header_left.

БЛОГ НА HUSL

Некликабельное поле ввода

Ответы (2 шт):