.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48%;
}

//وضعیت محتوا در مناسب نیست و وقتی به ابتدا آن اسکرول می کنید بخشی از اطلاعات از دست رفته است

.container {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  width: 50%;
}

//در این حالت وقتی به ابتدا آن اسکرول می کنید همه محتوا در دسترس است

<h1>QR Code Generator</h1>
  <input type="text" id="qr-text" placeholder="Enter text">
  <button onclick="generateQR()">Generate QR Code</button>
  <div id="qr-code"></div>

function generateQR() {
  const qrText = document.getElementById("qr-text").value;
  const qrCode = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrText}" alt="QR Code">`;
  document.getElementById("qr-code").innerHTML = qrCode;}