Can you help me troubleshoot why the "Subscribe now!" button is extending beyond the container in the image below? How can I align the right edge with the rest of the page, specifically column 12 in the bootstrap grid?
I attempted using box-sizing: border-box, but it did not resolve the issue.
Take a look at my HTML code:
.container-fluid {
padding: 0;
}
.carousel-inner .carousel-item h1 {
font-weight: bold;
font-size: 300%;
/*-webkit-text-stroke:1px black;*/
font-family: 'Open Sans', sans-serif;
/*text-align:right;*/
}
.carousel-inner .carousel-item img {
filter: brightness(50%);
}
#paddingrow {
padding: 25px;
}
#paddingrowLarge {
padding: 100px;
}
#accordionRightalign {
float: right;
}
#mycard {
float: right;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>