making webpage looks same on different screens - css

Question

I have a webpage made by me. At this moment, on different screens, it is looking pretty different.
On my computer the "Sales" text is looking like this (which is I want):
FIRST IMAGE:
Whereas on another computer(with different screen size), its looking in this way(which is not I want):
SECOND IMAGE:
In this SECOND IMAGE, the sales text is going far left for some reasons (on different screen) which is not I want. I want it to be on the top of hands image as depicted in the FIRST IMAGE.
The CSS codes which I am using for the sales text are:
.sales .text1 {
padding-left: 450px;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
}
I am wondering what changes I need to make in CSS so that its look same on different screen size computers.

Answer 1

You should use relative measurements like percentage,etc to avoid this, additional you can use media queries to have a different behavior depending of many factors like the screen width

Answer 2

Awesome question, you want to make your webpage responsive.
check out that link, I believe it has exactly what you are looking for.
https://www.w3schools.com/css/css_rwd_intro.asp

Answer 3

In your CSS, I have changed padding-left: 450px to 0 value and added text-align: right so that See More link will not be cut-off.
.sales .text1 {
padding-left: 0;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
text-align: right;
}