Div is ignoring whatever styling I put on it

May 9, 2022

We are doing a youtube clone for a project and I’m trying to style it. Regardless of what I put for styling it disregards it and nothing is applied.
I have tried adding it on the main div, the link, and it still doesn’t work. Any help will be greatly appreciated

import React from "react";
import { Link } from "react-router-dom";


const DisplayVideos = ({videos}) => {

    return ( 
        <div >
            {videos.map((video, index) => {
                // get video id
                return (
                    <div  style={{'margin-bottom': '80px'}}>
                        <Link to={`/video/${video.id.videoId}`}>
                            <div key={index}>
                                <img src={video.snippet.thumbnails.medium.url} alt="" />
                            </div>
                            <div>
                                <div >{video.snippet.title}</div>
                            </div> 
                        </Link>
                    </div>
                );
            })}
        </div>
    );
}
 
export default DisplayVideos;

styles page:
.display-title{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: rgb(29, 50, 67);
}
.display-description{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: rgb(0, 0, 0);
}

Link{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  
    /* CSS just to show the bounds */
    border: 2px solid;
    background-color: #eee

}
.text {
    width: 20%;
    inline-size: 10px; 
    overflow-wrap: break-word;
  }