title: How to style image which is overlaping
body: <p>I am developing a product information page where a user clicks on the product he should get the product image, description and below that recommended products</p>
  
  <p>The problem is when the user clicks the products, the image of the products get over recommended products and changes the whole style and for some products, it is working perfectly</p>
  
  <p>This is the <a href="https://i.stack.imgur.com/cFCJ8.png" rel="nofollow noreferrer">image</a> that it should look like which works perfectly for some products</p>
  
  <p>This is the <a href="https://i.stack.imgur.com/V50Hq.png" rel="nofollow noreferrer">image</a> of some products where they are overlapping and changing the UI</p>
  
  <p>Actually, in the product information, 3 components are embedded together and displaying.</p>
  
  <p>I tried to bring down the recommended products below but it affects the home page recommended products.</p>
  
  <p>Is there any solution for this</p>
  
  <p><code>margin-top: 0.005rem;</code> I tried this by increasing it to 40 but it affects the main home page styling. I don't want this and in this product image I tried to reduce the height and width and width of the image quality goes off and for some products like mobile it doesn't look good</p>
  
  <p>This is the carousel border CSS code </p>
  
  <pre><code>export const CarouselBorder = styled(Heading)`
    border-bottom: 2px solid var(--secondary-color);
    margin-top: 0.005rem;
    margin-bottom: 0.3rem;
    padding-bottom: 3px;
  `
  </code></pre>
  
  <p>This is the image css code:</p>
  
  <pre><code>    export const ImageGrid = styled.div`
    box-shadow: 0 1px 3px rgba(50, 50, 50, 0.4);
    padding: 10px;
    width: 78%;`
  </code></pre>