in MQ beweegt de tekst naar beneden als ik naar hogere resolutie ga?

Ik geef slechts 1 sectiecode van de pagina om het gemakkelijk te maken. dit is html-code:

<section id="portfolio">
<div class="portfolio-section-left-side">
<h3>WebdesignMaster: Uw Digitale Identiteit:</h3>
<h4>Welkom bij WebdesignMaster, uw partner in het creëren van digitale meesterwerken. Als creatieve geest endigitale identiteit.</h4>
</div>
<div class="portfolio-section-right-side"><img src="https://webdesignmaster.info/wp-content/uploads/2023/09/portfolio-section-image.webp" width="1080" height="550" alt="Website bouwen in Rotterdam"></div>
</section>

en deze is css code :

 #portfolio {
    display: flex;
    flex-direction: row;
    width: 100%;
	 max-width:1240px;
	  justify-content:center;
	  margin-left:auto;
	  margin-right:auto;
  }

  

  .portfolio-section-left-side {
	width: 45%;
	 max-width:558px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  
 
  }

  .portfolio-section-left-side h3 {
    margin-top:0.5rem;
  }

  .portfolio-section-left-side h4 {
    margin-top: 0.25rem;
  }

  .portfolio-section-right-side {  
	  display: flex;    
    justify-content: flex-end;
	 width:45%;
	 max-width:558px;
	  margin-left:2%;
  }

  .portfolio-section-right-side img {
    width: 100%;
    height: auto;
    max-height: 350px;
    margin-top: 2rem;
  }

wanneer je deze code opent onder 1082 pixels is de tekstregel gelijk aan de afbeelding. maar als je naar 1280 pixels gaat, gaat de tekst omlaag en blijft hij niet stabiel. om deze reden heb ik% en pixels in mijn code gebruikt. in het begin gebruikte ik alleen % .but toen ik het opende op 1081 was de tekstpositie goed. maar wanneer ik naar 1280 pixels omhoog ga, gaat de tekst naar beneden. Ik weet dat dit normaal is omdat ik % gebruikte. Vervolgens probeerde ik alleen pixels te gebruiken.

zoals dit voorbeeld:

#portfolio{
    display: flex;
    flex-direction: row;
	width:100%;
	max-width:1200px;
	justify-content:center;
	margin-left:auto;
	margin-right:auto;
     
  }

(de bovenstaande cijfers zijn een voorbeeld). daarna werden de marges rechts en links breder naarmate de resolutie van 1081 naar 1280 px ging. en het komt heel lelijk aan? Ik wil weten of er een oplossing is dat de tekst stabiel blijft in lijn met de afbeelding als ik van 1082 pixels naar 1280 pixels ga? of van 1280 tot 1560 pixels. Ik weet niet of het mogelijk is om positie absoluut te gebruiken? Ik heb het geprobeerd, maar het werkte niet. hoe kan ik dit probleem oplossen?

Bedankt

De pagina waar ik hulp bij nodig heb: [log in om de link te zien]