titles is exceeding the width of the div-CodePudding

Hello i am trying to replicate youtube. I am coding and aligning video list. I added video title. But the problem is video title is not showing properly. video title width alignment is not proper. the video title is showing on the top of other videos. video title exceed the width. i want the video title to fit with in the video. Kindly help me to fix this.

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.flexbox{
    display: flex;
    align-items: center;
} 

nav{
    padding: 10px 2%;
    justify-content: space-between;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: #fff;
    position: static;
    top: 0;
    z-index: 10;
}

.navright img{
    width: 25px;
    margin-right: 25px;
    

}

.navright .profile{
    width: 30px;
    border-radius: 30px;

}

.navleft .menuicon{
    width: 25px;
}

.navleft .logo{
    width: 130px;
    padding-left: 20px;
}

.navmiddle .voice{
    
    width: 16px;
}

.navmiddle .search{
    
    width: 16px;
}

.navmiddle .searcharea{
    
    border: 1px solid #ccc;
    margin-right: 15px;
    padding: 8px 12px;
    border-radius: 25px;
    
}

.navmiddle .searchbox{
    width: 400px;
}

.sidebar{

    background: #fff;
    width: 15%;
    height: 100vh;
    position: fixed;
    padding-left: 2%;
    padding-top: 20px;
    z-index: -10;

}

.shortcuts a img{
    width: 20px;
    margin-right: 20px;
}



.shortcuts a{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-decoration: none;
    width: fit-content;
    
    
}

.shortcuts a:first-child{
    color: red;
}

.sidebar hr{
    border: 0;
    width: 85%;
    height: 1px;
    background: #ccc;
}

.small-sidebar{
    width: 5%;
    height: 200px;
}

.container{

    padding-left: 17%;
    padding-right: 2%;
    padding-top: 20px;
    padding-bottom: 20px;

}

.container .banner{
    width: 100%;
}

.small-sidebar p{
    display: none;
    
}

.flexbox .channelpic{

    border-radius: 40px;
    width: 50px;

}

.listcontainer{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-column-gap: 16px;
    grid-row-gap: 30px;
    margin-top: 15px;
}

.vidlist .thumbnail{

    width: 100%;
    border-radius: 5px;
}

.vidlist .flexbox{

    align-items: flex-start;
    margin-top: 7px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav >
        <div >
            <img src="/images/menu.png" alt=""  >
            <img src="/images/logo.png" alt=""  >
        </div>
        <div >
            <div >
            <input type="text" placeholder="Search" >
            <img src="/images/search.png" alt=""  >
        </div>
        <img src="/images/voice-search.png" alt=""  >
        </div>
        <div >
            <img src="/images/upload.png" alt="" >
            <img src="/images/notification.png" alt="" >
            <img src="/images/simon.png" alt="" >
        </div>
    </nav>

    <!---sidebar-->

    <div >
        <div >
            <a href=""><img src="images/home.png" alt="" srcset=""><p>Home</p></a>
            <a href=""><img src="images/explore.png" alt="" srcset=""><p>Explore</p></a>
            <a href=""><img src="images/subscriprion.png" alt="" srcset=""><p>Subscription</p></a>
            <a href=""><img src="images/library.png" alt="" srcset=""><p>Library</p></a>
            <a href=""><img src="images/history.png" alt="" srcset=""><p>History</p></a>
            <a href=""><img src="images/playlist.png" alt="" srcset=""><p>Playlist</p></a>
            <a href=""><img src="images/messages.png" alt="" srcset=""><p>Messages</p></a>
            <hr>
        </div>
        
        <div >
            <h1>Subscription</h1>
            <a href=""><img src="/images/tom.png" alt="" srcset=""><p>Tom Hardy</p></a>
            <a href=""><img src="/images/Jack.png" alt="" srcset=""><p>Jack Nichol</p></a>
            <a href=""><img src="/images/gerard.png" alt="" srcset=""><p>Gerard Pique</p></a>
            <a href=""><img src="/images/megan.png" alt="" srcset=""><p>Megan Steve </p></a>

        </div>
    </div>
    <div >
        <div >
        <img src="/images/banner.png" alt="" >
    </div>
    <div >
    <div >
        <img src="/images/thumbnail1.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>

    <div >
        <img src="/images/thumbnail2.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>
    <div >
        <img src="/images/thumbnail3.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>
    <div >
        <img src="/images/thumbnail4.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>

    <div >
        <img src="/images/thumbnail5.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>

    <div >
        <img src="/images/thumbnail6.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>

    <div >
        <img src="/images/thumbnail7.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>

    <div >
        <img src="/images/thumbnail8.png" alt=""  >
       
        <div >
        <img src="/images/Jack.png" alt=""  >
    
    <div >
        <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
        <p>Easy tutorials</p>
        <p>15kview &bull; 2 days ago</p>
    </div>
    </div>
        

    </div>

    

    </div>
</div>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

Just add word-break:break-all to .vidinfo > a.

.vidinfo > a {
  word-break: break-all;
}