title: problem with the background image and icons not aligning on the background Image
body: <p>This is what I am trying to make <a href="http://uupload.ir/files/lue6_web_1920_2.png" rel="nofollow noreferrer">http://uupload.ir/files/lue6_web_1920_2.png</a> and this is what I got so far(I only uploaded half of the picture because of being too big)
  <a href="http://uupload.ir/files/ldto_capture.png" rel="nofollow noreferrer">http://uupload.ir/files/ldto_capture.png</a>
  my 1st problem is that Inside my react component I do not know how to set these icons on the background image
  2nd is that the page is not responsive with this code I have and I can't center have spacing between the cart and the user profile icon
  lastly, everything seemed to be out of place.</p>
  
  <pre><code>import React from "react";
  import './Home.css';
  import Cover from '../Designs/adult-beautiful-beauty-413727.svg';
  import User from '../Designs/user.svg';
  import Cart from '../Designs/shopping-cart-black-shape.svg';
  const Home = () =&gt; {
      return (
          &lt;div&gt;
              &lt;div&gt;
                  &lt;img src={Cover} alt="cover" className="cover" /&gt;
              &lt;/div&gt;
              &lt;div className="nav"&gt;
                  &lt;img src={User} alt="cover" className="user" /&gt;
                  &lt;img src={Cart} alt="cover" className="cart" /&gt;
                  &lt;hr /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  export default Home;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.cover{
      position: absolute;
      width: 100%;
      z-index: -1;
  }
  .nav{
      display: grid;
      grid-column-gap: 100px;
      float: right;
      border:1px solid red;
  }
  </code></pre>