https://codepen.io/alex-rogochiy/pen/gZXXdV
Используй вместо фона тег img так как это по сути не фон а отдельный элемент график
1. Изображению задаешь 100% ширину а высоту авто чтобы автоматически пропорционально высчитывалась
2. Ну а родителю ширину уже выбирай сам, в нашем случае это main_right
3. vertical-align: middle это как фикс используется, долго обяснять. Но если хочешь разобраться то поставь цветной фон main_right и увидишь что без vertical-align изображение по высоте пикселя на 4 меньше родителя

<div class="main_right right-block">
  <img src="https://startly.web3templates.com/demo/software/images/screen2.jpg" alt="">
</div>

.main-container {
  display: flex;
  justify-content: space-between;
	margin-top: 100px;
	box-sizing: border-box;
}

.main_left {
	width: 40%;
}

.main_right {
  width: 50%;
}
.main_right img {
  width: 100%;
  heiht: auto;
}