I have problems not being able to make a container display a height of 100% and a width of 50% on tmy screen despite my CSS already mentioning those specified measurements in the appropriate div class. I want it to look like my design in the first image below but i got the second image below that as my result.
enter image description here
My result is the one below
enter image description here
This is my current HTML code
<!doctype html>
<html>
<head>
<link href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="ID-registration">
<div class="application-image-2">
<img id="passport-image"
src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/Passport-PNG-Free-Image.png"
alt="Passport-PNG-Free-Image">
</div>
<div class="ID-application">
<h2><h2 style="color: lightskyblue;">ID Confirmation</h2>
<h3>Register to continue</h3>
</div>
</div>
</body>
</html>
You can view my full HTML and CSS on my full work on codepen: my full codepen work
besides the problem with the container for my passport image, the container on the right with the div class= “ID-application won’t display the text with a left alignment and a center aligned justified content despite me having already mentioning it in my CSS. Please help me fix this error. Thank you
I tried moving the display: flex atribute from an in-line CSS to the external CSS in hopes of making the page more responsive and placed both div containrers under the same div class that uses the flex property to make them appear side by sif=de equally but it hasn’t worked.