Как мне убрать эту двойную панель поиска Google?

Question

Мне нужно создать домашнюю страницу Google для проекта, используя html и css. И выделенное красным поле кода (на втором рисунке и в коде жирный текст на итальянском языке) я должен включить в код, но когда я хочу вставить его, я получаю в результате эту двойную строку поиска ( первая картинка), которая тоже не того размера, который я хочу иметь. Я поместил в поле кода часть моего кода html, который вы также можете увидеть на втором рисунке. Может ли кто-нибудь мне помочь?

PS Я не могу указать код css по какой-то причине в вопросе, поэтому вы можете увидеть его только на картинке. Извините.

как код выглядит в браузере изображение кода

    <div class="content">
  <div class="search-wrapper">
    <a href="" class="search-logo">
      <img src="google copy.jpg">
    </a>
    <div class="search-bar">
        ***<form action="https://google.com/search">
          <input type="text" name="q">
          <input type="submit" value="Google Search">
          </form>***
      <div class="search-icon">
        <i class="fa fa-search"></i>
      </div>
      <input type="text">
      <div class="search-icon right">
        <i class="fa fa-microphone"></i>
      </div>
    </div>
    <div class="search-buttons">
      <a href="">Google Search</a>
      <a href="">I'm Feeling Lucky</a>
    </div>
    <p class="search-info">
      This is a search bar. <a href="">Random Link</a>
    </p>
  </div>
</div>

Answer 1

Вы только что добавили дополнительный тег <input>. Проверьте этот код:

        <div class="content">
            <div class="search-wrapper">
                <a href="" class="search-logo">
                    <img src="google copy.jpg">
                </a>
                <div class="search-bar">***
                    <form action="https://google.com/search">
                        <input type="text" name="q">
                        <input type="submit" value="Google Search">
                    </form>***
                    <div class="search-icon">
                        <i class="fa fa-search"></i>
                    </div>
                    <!-- REMOVE THIS <input> -->
                    <div class="search-icon right">
                        <i class="fa fa-microphone"></i>
                    </div>
                </div>
                <div class="search-buttons">
                    <a href="">Google Search</a>
                    <a href="">I'm Feeling Lucky</a>
                </div>
                <p class="search-info">
                This is a search bar. <a href="">Random Link</a>
                </p>
            </div>
        </div>

Answer 2

Я не применил ваш css, только html, но если я удалю поле input, упомянутое в моем комментарии, второе текстовое поле исчезнет

    <div class="content">
  <div class="search-wrapper">
    <a href="" class="search-logo">
      <img src="google copy.jpg">
    </a>
    <div class="search-bar">
        ***<form action="https://google.com/search">
          <input type="text" name="q">
          <input type="submit" value="Google Search">
          </form>***
      <div class="search-icon">
        <i class="fa fa-search"></i>
      </div>
      <!-- REMOVE THIS? <input type="text"> -->
      <div class="search-icon right">
        <i class="fa fa-microphone"></i>
      </div>
    </div>
    <div class="search-buttons">
      <a href="">Google Search</a>
      <a href="">I'm Feeling Lucky</a>
    </div>
    <p class="search-info">
      This is a search bar. <a href="">Random Link</a>
    </p>
  </div>
</div>