[Solved] [Help] I am using flexbox for the top portion, but no matter what I do I cannot figure out how to get the icons to be pushed further to either side.

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