当我调整浏览器大小时，元素与图像重叠

我正在开发一个简单的投资组合网站。但是当我通过浏览器元素调整大小时，会与背景图像重叠。

<div class="container">
        <div class="main-heading">
            <h1>Jegath S</h1>
        </div>

        <div class="desc">
            <p>
               I am a web developer and designer
               from INDIA . I engoy building anything
               using code . Need a website ?
               Leave it to me :)
           </p>
        </div>

        <div class="explore-button">
            <button class="btn"><a href="#works">Explore</a></button>
        </div>

        <div class="social-media">
            <i class="fa fa-facebook" aria-hidden="true"></i>
            <i class="fa fa-envelope" aria-hidden="true"></i>
            <i class="fa fa-phone" aria-hidden="true"></i>
        </div>
    </div>

这是css代码

*{
    margin: 0;
    padding: 0;
}

body ,html{
    font-family: 'Open Sans', sans-serif;
    background: f6f6f6;
    height: 100%;
    width: 100%;
}

.container{
    font-family: 'Vollkorn', serif;
    background-image: url(../images/bg-img.jpg) ;
    background-repeat: no-repeat;
    min-height: 100%;
    background-position: right;
    position: relative  ;
}

.main-heading{
    position: absolute;
    font-family: serif;
    font-size: 60px;
    top: 180px;
    left: 565px;
    display: inline-block; 
}

.desc{
    width: 304px;
    text-align: justify;
    letter-spacing: 1px;
    position: absolute;
    top: 400px;
    left: 410px;
    line-height: 35px;
}

.explore-button a{
    color: #fff;
    text-decoration: none;
}

.btn{
    width: 110px;
    height: 42px;
    background: #9A3FE0;
    border: none;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    top: 570px;
    left: 500px;
}


.social-media .fa{
    font-size: 25px;
    display: block;
    margin-bottom: 30px;
    margin-left: 45px;

}

.social-media .fa-facebook{
    position: absolute;
    top: 50%;
}

.social-media .fa-envelope{
    position: absolute;
    top: 40%;
}

.social-media .fa-phone{
    position: absolute;
    top: 60%;
}

请给我一个解决方案。

这是浏览器全宽时的图像

这是浏览器调整大小时的图像

如果有人可以向我建议解决方案，那将非常有帮助。提前致谢 。