My goal is to set up a layout with two columns in the first row, one at 70% width and the other at 30%, and a single column in the second row. However, when I add text and images, the content doesn't position as expected:
body {
background-image: url("1.JPG");
background-repeat: repeat-x;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.div {
flex-basis: 50%;
}
.div1 {
margin-left: 100px;
color: white;
}
.div2 {}
.div3 {
margin-left: 100px;
}<div class="wrapper">
<div class="div div1">Hi!
<?php echo htmlspecialchars($_SESSION["username"]); ?> Welcome to HMIS</div>
<div class="div div2">hhhhh</div>
<div class="div div3">
<a href="bill.php" class="logo me-auto"><img src="assets/img/logo.png" width="100" height="60"></a>
</div>
</div>