Distorted CSS after Build process

Question

After running the build process for my project, i noticed some of my CSS was not displayed the same as during development. There is a little difference between the way it appears in development and the way it appears in build.

This is how it appears in development:

This is how it appears after build:

I have asked chatGPT and i am not sure of what exactly could be the problem. Here is my code snaps:

return (
    <>
        <div className="most-viewed-arr"> 
            <button className="button-viewed">MOST VIEWED</button>
            <div className="button-next">
                <IoMdArrowDropleft className="button-arr" onClick={prevItem}/>
                <IoMdArrowDropright className="button-arr" onClick={nextItem}/>

            </div>

        </div> <hr className="last-hr"/>

    <div className="image-carousel">
     <IoIosArrowDropleft className="left-arrow" onClick={handlePrev}/>
      <div className="image-containment">
        {images.slice(startIndex, startIndex + adjustedNumImagesToShow).map((image, index) => (
          <img key={index} src={image} alt={`Image ${index + 1}`} />
        ))}
      </div>

      <IoIosArrowDropright className="right-arrow"  onClick={handleNext}/>

    </div>

    <div className="most-viewed">
    <div className="most-viewed-image">
    {mostViewed.slice(Start, Start + adjustedNumImagesToDisplay).map((product, index) => (
        <div key={index} className="product-container">
            <div className="product-2">
            <img src={product.img} alt={`Image ${index + 1}`} />
            <div className="text-span">
            <p className="productName">{product.name}</p>
            <p className="productPrice">{product.price}</p>
            </div>
            </div>
        </div>
        ))}
        </div>

    </div>

This is my CSS:

.image-carousel {
    display: flex;
    flex-direction: row;
    position: absolute;
    margin-top: -15rem;    
}
.image-containment img {
    color: black;
    position: relative;
    opacity: 30%;
    width: 11vw;
    height: 14vh; 
}
.image-containment img:hover {
    opacity: 80%;
}
.image-containment {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-left: 0.5rem;
    border: 2px solid rgb(242, 236, 236);
    padding: 2rem 0.5rem ;
    gap: 5px;

}

.left-arrow,
.right-arrow {
    color: black;
    font-size: 2.5rem;
    margin-top: 4rem;
    opacity: 30%;
}
.left-arrow:hover,
.right-arrow:hover {
    opacity: 50%;
}

.left-arrow{
    margin-left: 2rem;   
}

.text-span {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: black;
    width: 7rem;
}

.most-viewed {
    margin-top: 2rem;
    
}

.most-viewed-image {
    display: flex;
    flex-direction: row;
    
}

.product-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 19rem;

}



.product-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 2px solid whitesmoke;
    margin-left: 3rem;
    width: 21rem;
    gap: 1.5rem;
    background-color: whitesmoke;
    
}

.product-2 > * {
    
    width: 8rem;
}

.productName{
    font-size: 14px;
    color: gray;
}

.productName:hover {
    color: orangered;
    cursor: pointer;
}
.productPrice {
    color: orangered;
    font: 16px san-serif;
    font-weight: 700;
}

.button-viewed {
    color: white;
    background-color: rgb(48, 46, 66);
    padding: 0.8rem 1rem;
    margin-left: 5rem;
    font-size: 15px;
    font-weight: 900;
    font-family: Tahoma, sans-serif;
    letter-spacing: 1px;
   
    
}

.most-viewed-arr {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 70rem;
    
}

.button-next {
    display: flex  ;  
    font-size: 24px;
    margin-right: 2rem;
    gap: 1rem;
    
}

.button-arr {
    border-radius: 50%;
    background-color: rgb(233, 229, 229);
    padding: 2px;
    font-size: 34px;
    color: rgb(174, 169, 169);
    

}

.last-hr {
    height: 3px;
    width: 100rem ;
    color: gray;
    background-color: gray;
    opacity: 10%;
    margin-left: 14.2rem;
}