العنوان يخرج من ال div

هناك مشكلة عندي فكلما أضفت عناصر جديدة فهي تخرج خارج الdiv أو المربع المخصص لها ولا أدري ما السبب لو أحدكم يستطيع تجربة الكود المكتوب وفهم ما السبب سأكون شاكرة له 🙏🙏

     <html>

Main {

background-image:url(library.jpg);
width:100%;    
height:100%;
position:fixed;
top:0px;
left:0px; 
opacity: 0.7;
background-position: center;
background-repeat:no-repeat;
background-size:cover;

}
 #books{     
height:100%;
width:89%;
position:sticky;
top:280px;
left:140px; 
background-color:beige;     
}
.tit{

 border:4px solid #f0c99b;
 background-color: #f8e1bd;
 margin-top:90;
 text-align:left;
 font-family: cursive;
 width:40%; 
 padding-left:30px;
 padding-top:10px;
 padding-bottom:10px;
 color:#b14b00;
 margin-left:360px; 
 text-align: center;   
}
.book{
margin-left:35px;
display:inline-block;    
}
.book img{
 height:260px;
 width:190px;  
}
.book h1{
text-align: center;
background-color: white;
border:2px solid bisque;
height:40px;
width:190px;   
}
.book a{
height:30px;
width:190px; 
text-align: center;
background-color: white;
border:2px solid #b14b00;
padding-left:20px;     
padding-right:20px;
text-decoration: none;
color:#b14b00;
}
.book a:hover{
 background-color:#b14b00;
 color:white;
 width: 193px;   
}



</style>
</head>
<body>
<div id="Main">    


Popular Books Name Add book
Name Add book
Name Add book
Name Add book
Name Add book
New Books

</body>
</html>

الصور المستخدمة