help to adjust the bar to each screen

Hello, I have been with this for months and without asking but not being able to solve it, I must open the query here.

In my site avellanedashop.com, I put two search bars, one for mobile screens and tables, and another for desktop. But I did this because I did not manage to get one of the two bars to adapt automatically to the full width of each screen, that is, as the amazon search bar does, which regardless of the size of the screen adjusts to cover the entire width available.

What I would like is that the Advanced Woo Search bar can do it, but since I did not get that, I added AJAX Search for WooCommerce and after searching a lot I found some css for some sites and I pasted it, barely achieving that this last bar can occupy a size approximately according to what would be a desktop site without being too small. but still I can’t get it to fit the full width automatically according to the screen.

Could you help me, please, with the code that can make one of the two adapt well so I eliminate the other and the header of my site looks good?

the css that I have at the moment is the following:

.dgwt-wcas-sf-wrapp {
zoom: 1.13;
width: 100%;
margin: 0px;
position: asolute;
background: # 14A6E3;

min-width: 600px;
}
.dgwt-wcas-no-submit {
height: 50%;
margin: auto;
max-height: 20px;
width: 100%;
max-width: 1023px;
left: 0px;
right: auto;
opacity: 100%;
fill: # 000;
padding-top: 5px

The page I need help with: [log in to see the link]