How can I customize CSS for my order tracking page?

[pushthepeak]

I just recently followed a tutorial on how to add an order tracking page to my store. It looks like this:

I noticed that the “TRACK” button and the text field box don’t fit the theme and I was hoping someone could help on how I could make it fit the theme and not look so default.

Here is a site preview: https://k6uy2sssc7xwm06t-75017814299.shopifypreview.com

[StoreWatchers]

Hi, @pushthepeak

Greetings from the Store Watchers Support Team! Happy to help you today.

1. Go to online store > theme > edit code > assets > base.css(file) and Paste the below code at the bottom of the file → Save

.main-page-title{
 text-align: center;
}
#YQNum {
 width: 35%;
 padding: 10px;
}
#shopify-section-template--19040574570779__main div:nth-child(3) input[type=button]:nth-child(2){
    border: 0;
    padding: 6px 5rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    text-decoration: none;
    color: rgb(var(--color-button-text));
    transition: box-shadow var(--duration-short) ease;
    background-color: rgba(var(--color-button), var(--alpha-button-background));
}

After applying the above CSS code , it will show like the following screenshot:

Let me know If need further assistance

Regards,

Store Watchers Support Team

[KyawZawLin]

I have put the code at the bottom of the code in base.css but mine still looks like this.

Will appreciate your help here. thank you.