Please help me push these further to either side. It has colors to better visualize the flexbox.

HTML:
`<div class=“topInfo icon”>
<img src=“icons/icon1.png” alt=“” class=“hamburgerIcon”>
</div>

    <div class="topInfo myText">
        <h1>MINNIE MINNIE</h1>
        <p class="spaced">FREELANCE ARTIST</p>
    </div>

    <div class="topInfo icon">
        <div class="rightIcons">
            <img src="icons/icon2.png" alt="" class="mailIcon">
            <img src="icons/twitterlogo.png" alt="" class="twitterIcon"">
        </div>
    </div>

`

CSS:
``/* TOP BAR FLEX CONTAINER */

.infoContainer {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid;
border-image: linear-gradient(80deg, #18181800, #eeeeeea5, #18181800) 1;

}

.topInfo {
flex: 1;

}

.rightIcons {
display: flex;
justify-content: space-between;
align-items: center;
}``

EDIT: I was using transform for the icon to change their size, when I should have been using height, changing that and some other various flexbox tweaks helped a lot.

#css #frontend #webdesign #cascadingstylesheets #html #coding