How can I troubleshoot my CSS widths for my search box

I've been trying to style my search box the way I want it and it's very nearly there. The only problem is that my widths are wonky somewhere. They look OK on initial glance but the area of the input box leaks into the submit button. This is most visible on mobile where my border-right: none; is ignored and a rounded border overlaps the button. It's also evident on Chrome where a suggestions dropdown overhangs the button.

iPhone view

Area of input box leaks into button

The search box is generated by Search API Pages module on Drupal 9. You can see it in action here https://verygomez.com/search where it appears in both the sidebar block and on the page. I need them both to look good but they share most of the CSS. I'm at a bit of a loss. Incidentally, I'd ideally like the search bar in the sidebar to be a bit wider but I can't figure out how to do that.

.search-api-page-block-form-search {      position:relative;      width:100%;      display:inline-block;  }  .search-api-page-block-form-search .form-item {    width: 70%;    float: left;  }  .search-api-page-block-form-search .form-actions {    width: 30%;    float: right;  }  .search-api-page-block-form-search .form-type-search input {    border-right: none !important;    text-indent: 25px;    background-color: transparent;    position: absolute;    display: inline-block;    width: 66%;  }  .search-api-page-block-form-search .form-type-search:before {    content: "\f002";    font-family: FontAwesome;    position: relative;    top: 8px;    left: 25px;    background-color: transparent;  }  .search-api-page-block-form-search .form-item,  .search-api-page-block-form-search .form-actions {    margin: 5px auto!important;    display: inline-block;    font-family: Consolas, "courier new";  }  .search-api-page-block-form-search .form-actions input {    font-family: FontAwesome;    margin: 0 !important;  }  .path-search form.search-form>.form-wrapper>.form-submit{      position:relative;      right:0;      bottom:0;      margin:0 !important;      width:100%;  }  

Edit

I have a progress update. Changing the position from absolute to relative here:

.search-api-page-block-form-search .form-type-search input {    border-right: none !important;    text-indent: 25px;    background-color: transparent;    position: relative;    display: inline-block;    bottom: 25px;  }  

has corrected the input box to the correct width enabling me to scrap the 66%. This could solve my problem but now the boxes are no longer aligned horizontally. I tried to fudge it with a bottom but of course it isn't close enough. I just have a different problem to solve. (I have however managed to make the sidebar search box wider so it's not all bad).

Edit 2

Final progress update of the evening. I have now exchanged that issue for yet another one. Changing the fontawesome background image to position: absolute; (as it also is in the code of the default search box that I'm copying from), the box and button are now perfectly aligned and the widths look good. However, with an absolute setting the search icon is now in a different position in the sidebar than in the page and it changes according to screen size so it's also out of alignment on mobile. Is there a way to make it just sit neatly in the search box? I feel like I'm missing something.

.search-api-page-block-form-search .form-type-search:before {    content: "\f002";    font-family: FontAwesome;    position: absolute;    top: 42px;    left: 34px;    background-color: transparent;  }  

https://stackoverflow.com/questions/65860189/how-can-i-troubleshoot-my-css-widths-for-my-search-box January 23, 2021 at 10:13PM