Tell us what’s happening:
Hi, I have worked out how to center my image horizontally in my flexbox child, and I want to wrap the text around the child. It appears that vertically centering the image has created another column for the text. I have done my due diligence googling and can’t find a fix. the only thing I came up with was to put a table in the child and format the text around the image using a 1 2 1 column table in the child but that isn’t good coding 
Your code so far
<!doctype html>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body:before {
background:url(“negative.jpg”);
display: block;
content:"";
position:absolute;
z-index:-1;
top:0; left: 0; right: 0;
opacity: .4;
min-height: 100%;
}
.hbground {
border-radius: 8px;
background-image: #32336A;
background-image: -webkit-radial-gradient(bottom right, #32336A, #B5D4E6);
background-image: -moz-radial-gradient(bottom right, #32336A, #B5D4E6);
background-image: radial-gradient(to top left, #32336A, #B5D4E6);
width: 100%;
height: 140px;
padding-top: 5px;
background-position: right;
background-repeat: no-repeat, no-repeat;
margin-right: auto;
margin-left: auto;
position: relative;
}
h1{
font-size: 42px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
font-style: italic;
color:rgb(70, 65, 65);
text-align: center;
}
h2 {
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
p {
font-size: 18px;
font-family:monospace;
color:rgb(0, 0, 0);
margin-left: 2px;
margin-right: 2px;
font-weight: 200;
}
.centertext{
text-align: center;
}
.nav-link{
background-color: rgba(100, 100, 100, 0.336);
font-size: 20px;
border-radius: 10px;
list-style-type: none;
display: inline-block;
padding: 5px 15px 5px 15px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin-left: 2px;
position: sticky;
}
a {
display: inline;
padding: 8px;
}
.fixfimg {
float: right;
margin-top: -100px;
}
input {
width: 220px;
padding: 12px 20px;
margin: 2px 0;
box-sizing: border-box;
border: 3px solid #555;
border-radius: 4px;
}
input[type=button],
input[type=submit] {
background-color: #555;
border: 3px;
color: #fff;
padding: 8px 14px;
text-decoration-style: wavy;
cursor:cell;
width:100px;
margin-left: 4px;
}
.flex-container {
flex-direction: row;
width: 90%;
display: flex;
margin:auto;
column-gap: 10px;
}
.item {
border: 2px solid;
border-radius: 6px;
width: 33%;
margin: auto;
height: 300px;
}
.box {
display:flex;
align-items: center;
justify-content: center;
text-align: left;
flex-wrap: nowrap;
}
</style>
<header id="header">
<div class="hbground">
<nav id="nav-bar">
<ul style="position: fixed">
<li class="nav-link"><a href="#home">Home</a></li>
<li class="nav-link"><a href="#news">News</a></li>
<li class="nav-link"><a href="#contact">Contact</a></li>
</ul>
</nav>
<div><h1>Fix Stuff!</h1><br>
<img class="fixfimg" src="https://i.ibb.co/Z8hb930/fixfaqs1.gif" id="header-img"</img>
<p style="margin-top: -30px;" class="centertext">Posted by DB </p>
</div>
</div>
</header>
<form class="centertext" action="https://www.freecodecamp.com/email-submit" id="form">
<label "email" id="email"><h2>Enter your email:</h2></label>
<input type="email" id="email" name="email" placeholder="Enter a valid email address" required><input type="submit" id="submit"><br>
</form>
<div class="flex-container">
<div class="item"><img src="tool1.png" style="float:right" </img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie mi in ipsum sollicitudin, ac scelerisque elit bibendum. Nullam porttitor rutrum felis nec varius.</p></div>
<div style="float:left" class="item box"><img src="tools.png"</img>
<p>Morbi varius, sapien id tempus porttitor, leo libero sagittis arcu, id porta urna leo in purus. Phasellus augue metus, iaculis at interdum a, accumsan sit amet arcu. Nunc cursus, purus non vehicula iaculis, ligula tortor porttitor magna, in mattis urna lectus sit amet elit. Quisque posuere lacinia sapien, eget aliquet quam molestie vitae.</p></div>
<div class="item"><img src="tool2.png"</img></div>
</div>
<iframe style="float:right" width="500" height="225" src="https://www.youtube.com/embed/665o5OwV_KU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36 Edg/94.0.992.31
Challenge: Build a Product Landing Page
Link to the challenge: