CSSでボタンを横並びにしたい

Question

前提・実現したいこと

CSSで横長の購入ボタンを2つ横並びにしたいです。
その際画像の幅を変えてもボタン、指定した位置と大きさがずれないようにしたいです。

発生している問題・エラーメッセージ

見てる画面のサイズを変えるとボタン位置と大きさがずれてしまう。

該当のソースコード

<section class="wow fadeIn">
  <div class="k-offer-single">
     <p class="tanpin01"><a href="#"><img src="#" alt="単品1個を注文する"></a></p>
     <p class="tanpin03"><a href="#"><img src="#" alt="単品3個を注文する"></a></p>
  </div>
  </section>

@media screen and (min-width:750px) {
.k-offer-single {
  background: url("###") no-repeat center;
  background-size: 100%;
  height: 29vw;
  width: 100%;
}

.k-offer-single .tanpin01{
  position: relative;
  top: 15vw;
  left: 20vw;
  width: 75%;
  display: inline-block;
}

.k-offer-single .tanpin03{
  position: relative;
  top: 7vw;
  left: 50vw;
  width: 75%;
  display: inline-block;
}
}

@media screen and (min-width:750px) and (max-width: 1200px) {
.k-offer-single {
  background: url("###") no-repeat center;
  background-size: 100%;
  height: 29vw;
  width: 100%;
}

.k-offer-single .tanpin01{
  position: relative;
  top: 15vw;
  left: 20vw;
  width: 75%;
  display: inline-block;
}

.k-offer-single .tanpin03{
  position: relative;
  top: 7vw;
  left: 50vw;
  width: 75%;
  display: inline-block;
}
}

試したこと

はじめは％で指定していたのですがずれてしまったためvwに変更したところ改善できませんでした。
初心者のため初歩的なミスがあるかもしれません、、
思い当たることはやってみたのですが結局解決できませんでした。
知識のある方どなたかご教授くださいませ。

Answer 1

完成形が見えないので勘なのですが、こちらでいかがでしょうか?

.k-offer-single {
  background: url("###") no-repeat center;
  background-size: 100%;
  height: 29vw;
  width: 100%;

  display: flex; /* 追加 */
  justify-content: center; /* 追加、ボタンを中央配置したいなら */
}
.k-offer-single .tanpin01{
  margin-right: 10px; /* 追加、ボタン同士の余白を指定 */
  /*
  position: relative;
  top: 15vw;
  left: 20vw;
  width: 75%;
  display: inline-block;
  */
}

.k-offer-single .tanpin03{
  /*
  position: relative;
  top: 7vw;
  left: 50vw;
  width: 75%;
  display: inline-block;
  */
}

/* ボタンの見た目を仮で実装 */
.k-offer-single a {
  padding: 10px;
  background: #f00;
}