I can not get search box to cover 96% of the screen under 580px?

hallo,

I have made my own search box and it is working very wel.

but there is 1 problem under 580 px .

I want that search form covers 96% of the width of the screen..

this is my CSS code:

.flex-container-section4 {
  width: 100%;
}

#searchform1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96%;
  margin: 1.5rem auto;
}

form {
  display: flex;
  width: 100%;
}

input[type="text"] {
  flex: 1;
 max-width:580px;
  padding: 6px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  outline: none;
}

#searchsubmit {
  font-size: 12px;
  background-color: #fff;
  border: none;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-left: -50px;
}

#searchsubmit:hover {
  cursor: pointer;
  background-color: #f2f2f2;
}

I have tried everything but I couldn’t solve the problem. it is staying only on stable width.

as you can see I use this search box in 2 places 1 on big screens in first row that is OK . and the second on small screen in second row .

I have made of this search box 2 classes one for big screen and the second for small screen. in 1 place I let the 1 works and the other I set to display:none.

does some one knows where the problem can be . or how I can solve this problem. I know it is serach box with form but I think this is flex issue or may be I am wrong !

please open inspect element just on home page because I didn’t work yet the other pages completly. please open it under 580px.

thanks

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