The Subscribe Text is appearing outside the button. Any idea why and how I can fix it?-CodePudding

I've been trying to have the word "Subcribe" be inserted into the button, however no matter what I try it keeps appearing stuck on the right of it completely outside. I even ended up removing everything else and have that in a html file alone and its still happening. Any help would be greatly appreciated.

Code:

<div >
            <form action="">
            <h1>Join Our Newsletter</h1>
                <p>For daily updates about our Church and Mass readings. Please join our Newsletter</p>
                <div >
                    <i ></i>
                    <input  type="email" name="" value="" placeholder="Enter your email">
                    <input  type="button">Subscribe</button>
                </div>
            </form>
        </div>

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;
}

CodePudding user response：

It looks like the following tag is not closed properly.

<input  type="email" name="" value="" placeholder="Enter your email" />

Also the button doesn't have a right start tag

<button  type="button">Subscribe</button>

CodePudding user response：

Your HTML is invalid. <input> does not have a closing tag. You can fix that two ways

Give you input a value and close the tag:

<input type="button" value="Subscribe" />

Make the button use the button tag element:

<button type="button">Subscribe</button>

CodePudding user response：

<input  type="button" value="Subscribe">

And add

.btn {
  color: black;
}

CodePudding user response：

It seems that your button tag does not have an opening tag! ;)

 *{
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: black;
    padding: 0 10px;
    text-transform: uppercase;
    cursor: pointer;
    width: 100px;
}

.button{
    width: 100px auto;
}

<div >
            <form action="">
            <h1>Join Our Newsletter</h1>
                <p>For daily updates about our Church and Mass readings. Please join our Newsletter</p>
                <div >
                    <i ></i>
                    <input  type="email" name="" value="" placeholder="Enter your email">
                    <button  type="button">Button</button>
                </div>
            </form>
        </div>

See fixed answer below!

(I have also made the button text black so it is visable!)