How do I correctly position an image on my website header?

[-DM]

On our current live site, our header contains text "MADE IN THE USA" along with a flag image next to it. However as we are transitioning to the updated version of impulse theme, I cannot figure out what is going wrong with the placement of the flag. 

The current site is storacell.net where at the top right is how we would like it to look on our new header

The preview to the updated version: https://os1m01hn2csll1e3-56250236962.shopifypreview.com

I thought the code was correctly transferred to the new one, but the flag image is sitting under the icons on the right, and we would rather the flag be directly to the right of the "madeintheusa" text.

This is what we are wanting it to look like

[PageFly-Kate]

@-DM ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

a.made-text {
    display: inline-flex;
    align-items: center;
}

 Hope my answer will help you!

[GemPages]

Hello @-DM 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    <style>
      @media (max-width: 767px ) {
        .site-nav__link--icon {
            padding-left: 3px !important;
            padding-right: 3px !important;
        }        
        a.made-text {
            display: inline-flex;
            align-items: center;
            font-size: 10px;
        }        
        a.made-text .flag {
            width: 30px;
            height: 30px;
        }
      }
    </style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team