将 Woocommerce 搜索栏左对齐

Question

I would like to have my search bar aligned to the left and approximately a 1/4 of the size it currently is (so it ends above the About Us Section). I would also like to make a border around it in #03c5b3.

Can anyone assist with this - I have tried several options lifted from other sites but nothing that is specific to my requests. I used:

    .woocommerce-product-search {
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: row-reverse
}

.woocommerce-product-search input {

    border-radius: 0 40px 40px 0;
    border-left: 0
}

.woocommerce-product-search button:before {
    content: "seach";
    font-family: "Arial";
    text-align: center;
    display: inline-block;
    font-size: 15px;
}

.woocommerce-product-search button {
    font-size: 0px;
    background-color: #fafafa;
    color: #666666;
    border: 1px solid #cccccc;
    border-right: 0;
    border-radius: 40px 0 0 40px;
}

.woocommerce-product-search {
      border-radius: 40px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
}
.left {
  position: absolute; important
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

However this didn't align it left and the border was too thick and the box not centred in the middle. Seemed like too many new issues to fix!!

https://sfxraynew.johnstoncommunications.co.uk/

Thanks

Answer 1

Something like this maybe? https://prnt.sc/MxKEpN2sTeIu

#header-right-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#header-right-section #header-right-sidebar {
    order: 1;
}
#header-right-section nav#site-navigation {
    order: 2;
}
#header-right-section .header-action {
    order: 3;
}