How do I make a pixel wide background-image not static on a website page?

Question

I have several background images with a certain width in pixels and underneath these images I have one or 2 titles with background-color (with a rectangle of color behind also with the width in pixels equal to the image in order to align) and text below the titles.

My problem is that when I resize the page, the text moves to the left but the image and/s title/s are static and end up disappearing from the page and I wanted the image the title/s move like the text without losing alignment.

This is the code I have in one of the sections for example :

.sec-3 .container .image-sec-3{ 
        background-image: url(/img/corebusiness1.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        margin: 2% auto 0% 6.2%;
        height: 300px;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
}<br>

.sec-3 .container .title-sec-3 h3{  
        text-align: center;
        margin: -51% 0% 0% 81.5%;
}

.sec-3 .container .text-sec-3 p{
        margin: -37% -100% 0px 126%;
}

E este é o código da media-query em que o problema começa a aparecer :

@media (max-width: 767px) /*Small devices/Tablets*/{

    .sec-3 .container .image-sec-3{
        margin: 5% 0px 0px 25%;
        width: 400px;
    }

    .sec-3 .container .title-sec-3 h3{  
        margin: -5% 0% 0% 22.5%;
        width: 400px;
    }

    .sec-3 .container .text-sec-3 p{
        margin: 3% auto 0px 10%;
    }
}

Thanks to those who give feedback

Answer 1

You are setting the width with and changing the position with %, they will never be equal even. You should always use % instead of px to build responsive elements and for positioning use the property position relative and top, left, bottom or right to set the position, margin is not for this.