Looking to replicate the Google home page for a project using HTML and CSS. I'm having trouble with incorporating the highlighted code (as shown in the second picture and identified by bold and italicized text) into my code. When I try to add it, I end up with this double search bar result (first picture), which is not the size I intended. Below is a snippet of my HTML code that you can also see in the second picture. Can anyone provide assistance?
Unfortunately, I am unable to share the CSS code here due to certain constraints, so you'll have to refer to the image provided. Apologies for any inconvenience.
View how the code looks in the browserCheck out the picture of the code
<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>