I want to have the tex1, tex2, and text3 divisions within the Text Division class without a scroll bar at the bottom. However, I am seeing a scroll bar at the bottom. What mistake am I making that is causing the scroll bar to appear in the Text Class Div? https://i.sstatic.net/QUvqq.png body { margin: 0px; direction: rtl; }
.Text {
width: 500px;
min-height: 500px;
height: auto;
overflow: auto;
margin: 50px 30px;
border: 2px solid red;
}
.Text1 {
width: 100%;
height: 60px;
margin: 30px auto;
border: 1px dashed green;
font-family: "IranSans";
font-size: 20px;
text-align: center;
color: #fff;
}
.Text2 {
width: 100%;
min-height: 60px;
height: auto;
overflow: auto;
color: #fff;
font-size: 32px;
font-weight: bolder;
font-family: "IranSans";
text-align: center;
}
.Text3 {
width: 100%;
min-height: 80px;
height: auto;
overflow: auto;
font-size: 12px;
font-family: "IranSans";
color: #fff;
text-align: center;
border: 1px solid yellow;
}
.Resume {
width: 180px;
height: 60px;
margin: 0px auto;
border-radius: 5px;
background-color: #00d363;
border: 1px solid #00d363;
font-family: "IranSans";
text-align: center;
}
.RezumeA {
width: 100%;
height: 100%;
display: block;
border-radius: 5px;
text-decoration: none;
color: #fff;
line-height: 50px;
}
.RezumeA:hover {
background-color: #007bff;
color: #00d363;
border: #00d363;
}
<body>
<div class="Text">
<div class="Text1">More than 5000 jobs</div>
<div class="Text2">Find your dream job now</div>
<div class="Text3">We provide the best and quickest ways to reach your desired job</div>
<div class="Resume"><a href="#" class="RezumeA">Submit resume</a></div>
</div>
</body>