Bootstrap button padding makes it appear like the button is going past the container border

Why does the "Subscribe now!" button go outside the container in the picture below and how can I make it so that the right edge lines up with the rest of the page? (column 12 in the bootstrap grid)

I have tried box-sizing: border-box but it had no effect.

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>

https://stackoverflow.com/questions/66847666/bootstrap-button-padding-makes-it-appear-like-the-button-is-going-past-the-conta March 29, 2021 at 09:15AM