I'm having trouble getting the word "Subscribe" to appear correctly inside the button. No matter what I try, it ends up stuck on the right of the button, completely outside of it. I even tried isolating it in a standalone HTML file and the issue persists. Any assistance with fixing this would be greatly appreciated.
Here is the code:
<div class="container">
<form action="">
<h1>Join Our Newsletter</h1>
<p>For daily updates about our Church and Mass readings. Please join our Newsletter</p>
<div class="email-box">
<i class="fas fa-envelope"></i>
<input class="tbox" type="email" name="" value="" placeholder="Enter your email">
<input class="btn" type="button">Subscribe</button>
</div>
</form>
</div>
Here is the CSS:
*{
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', serif;
}
.container{
padding: 10px;
}
.container p{
max-width: 600px;
margin: 40px auto;
color: white;
}
.email-box{
height: 40px;
display: flex;
justify-content: center;
}
.email-box i{
background: rgba(250, 247, 177, 0.6);;
width: 40px;
line-height: 40px;
}
.tbox,.btn{
border: none;
outline: none;
}
.tbox{
width: 0px;
transition: 0.5s;
}
.email-box:hover > .tbox,.tbox:focus{
width: 260px;
padding: 0 10px;
}
.btn{
background: rgba(250, 247, 177, 0.6);
color: white;
padding: 0 10px;
text-transform: uppercase;
cursor: pointer;
width: 100px;
}
.button{
width: 100px auto;
}