Search button overlaps delete button in seach bar

[premija]

Hi,

I have gotten into a predicament.

Store link -  https://premija-llc.myshopify.com/

Password - phiame

Theme - venture

I used the code below to achieve the search bar that I currently have. However, by changing my search bar, it caused the search button to overlap the delete button as seen in the photo below. How can I fix this?

.site-header__search {
	    width: 750px;
}
.site-header__search .site-header__search-input {
	width: 750px;
	opacity: 1;
	    padding: 10px;
}
.site-header__search .site-header__search-submit {
	    z-index: 68;
}

[prinpadure]

Hi @premija 

I used your css sample in the site and I didn't have the problem that you described. Is this the only code sample that you used?

[premija]

Hi @prinpadure 

Below are all the codes that I have added to the end of theme.scss.liquid

.site-header__upper{    padding: 5px;}

.product-card__availability {
	color: #E22120 !important;
}

h1.product-single__title {
    font-size: 22px !important;
}

.product-single__title {font-weight: 700 !important;}

#ProductPrice-product-template {  
  color: #FF4500;
}

.page-width {
    padding-left: 20px!important;
    padding-right: 10px!important;
    max-width: 100%!important;
}

.product-single__description {
    padding-left: 20px;
    padding-right: 10px;
    max-width: 100%;
}

.site-header__search {
	    width: 750px;
}
.site-header__search .site-header__search-input {
	width: 750px;
	opacity: 1;
	    padding: 10px;
}
.site-header__search .site-header__search-submit {
	    z-index: 68;
}

[prinpadure · Accepted solution]

If you want to remove the 'x':

input[type="search"]::-webkit-search-cancel-button { display: none; }

Or if you want to move it to the right, you can add a margin-right property

[premija · Accepted solution]

I moved it to the right as recommended and it works! Thank you so much.

input[type="search"]::-webkit-search-cancel-button { margin-right: 30px;
}