How to have an image next to a text in html

i want to recreate a site (https://trash.clothing/) and iam very new to coding HTML and CSS (overall coding)
and now i want to recreate the shopping cart icon with the "cart" text.

so i already deleted the code xD but i normally added a "div" and in the "div" the cart image with a class, then i changed the height and width in the css code. after that i added a paragraph for the "cart" text (you can see it on the original site what i mean). then i modified the "div" class with float: right so that they are horizontally aligned but that didnt worked, they were like stacked or idk very weird aligned and there is my problem. I will put my code down without the code that i deleted because i deleted it hahah. my code(html,css):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css" />
    <link
      href="https://fonts.cdnfonts.com/css/source-sans-pro"
      rel="stylesheet"
      <link
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="imgMain">
      <img src="img/trash-logo.avif" class="MainImg" />
    </div>
    <div class="navigator">
      <ul style="text-align: center">
        <li>Products</li>
        <li>FAQ & Contact</li>
        <li>Trash Gang</li>
      </ul>
    </div>
  </body>
</html>

@import url('https://fonts.cdnfonts.com/css/source-sans-pro');


.MainImg {
    display: block;
    margin-right: auto;
    margin-left: auto;
    max-width: 10%;
    height: auto;
padding-top: 80px;
max-width: 200px;
position:relative ;
}
.navigator{
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: 0.1em;                      
    font-weight: bold;
    font-size: 1.14286em;
}
ul {
    list-style: none;
    margin-top: 30px;
}

li {
    display: inline;
    margin-right: 20px;
    padding: 10px;
    
}

Solution

Display: flex is used to put multiple elements next to each other so it should help you align those two elements. If this solution is somewhat similar to what you expected, replace the <div class="image"> with your shopping cart image and you should be good !

.container{
  display: flex;
  align-items:center;
  gap: 1rem;
}
.container .image{
  width: 30px;
  height: 30px;
  background: blue;
}

<div class="container">
  <div class="image"></div>
  <p>Cart</p>
</div>