Having trouble with the responsiveness of coded elements on my webpage

I have a button on a site I'm working for that I'm having trouble keeping in the same position on different sized desktop screens. The purpose of the button is to function as an action button for those browsing the services offered by this company to go to the site's contact now page. It is fixed, above everything else on the page with a Z-index of 9999, and it is 65% from the top of the screen. Here is my code for it:

#contact-now {
  position: fixed;
  top: 65%;
  right: 1%;
  text-align: center;
  z-index: 99999;
  padding-left: 25px;
  padding-right: 25px;
}  
#text {
  padding-bottom:5px;
  font-size: 18px;
  }
  
#contact-now a {
  background: white;
  color: #e87600;
  display: inline-block;
  font-size: 20px;
  text-transform: uppercase;
  padding: 30px 10px;
   border: 2px;
   margin: auto;
  border-style: solid;
  border-color:#e87600;
}
#contact-now a:hover {
  text-decoration: none;
  background: #e87600;
  color: white;
  transition: 0.5s;
}
    .page-description {
  padding-top: 15px;
  }

</style>
<div id="contact-now">
  <div id="text">
  Think these services are <br> right for you?
</div>
  <a href="/contact-us-1">  Contact Now! </a>
</div>

On my colleague's computer screen, which is a 15.6in laptop screen, it appears like this:

I want to know how it can be fixed so that it will show up the same, or at least as similar as possible without clipping on the other elements, on both screens for desktop display.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

On 6/24/2022 at 5:06 PM, creedon said:

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

https://bancsec.squarespace.com/staging-incident-response here's the page that is giving the issue. The others have the same code in regards to the button

https://bancsec.squarespace.com/bancsec-inc-new

On this page as well, I'm running into a similar issue. I have used a sidebar plugin and gave it the title "Bancsec Advisor" which is a link that to the blog which I created using HTML and some CSS styling. It also appears at weird spots on the page.  I'm thinking maybe if I were to understand what value the site outer padding has (I set it to large on this page) in regards to how many pixels or what percentage of the view window it's supposed take up, then maybe I'd be able to set it so that it stays with the sidebar? Not sure

Also I understand I'm bombarding you with issues now, so whatever help you can provide would be very very much appreciated!