aplication, responsivo, mobile, desktop

Instead of trying to vertically center the card by giving it a margin top of Xpx, which will not be consistent due to screens of different sizes, make the body a flex container and then center things that way. First give it a height: 100vh; so that it takes up the whole screen, then give it:

    display: flex;
    justify-content: center;
    align-items: center;

This will perfectly center the card horizontally and vertically, so no need for all those margin- X : auto;.

I see all the bars (bar1, bar2, etc) share most of the same code except for color. Maybe you can give them an additional class of "bar" (or whatever name you like) and put the code that they all share there, and then use the class names that are specific to each for color. So for example your code could look like this:

.bar {
    width: 280px;
    height: 56px;
    border-radius: 10px;
    position: relative;
    margin-left: 410px;
    margin-top: 29px;
}

.bar1 {
    background: hsl(0, 14%, 95%);
}
.bar2 {
    background: hsl(38, 76%, 94%);
}