Margin and padding affecting the width of my web page

Question

I’m working on expanding my portfolio by remaking already made websites and in this one it seems like the margin and padding I put on the div holding my footer information is causing the whole content to shift toward the left leaving a white bar by the right.

HTML - Problem seems to be occurring with the footer:

    <footer>
      <div class="footer-content">
        <div class="footer-text">
          <p>
            <sup>1</sup> $7,500 Federal Tax Credit available for eligible buyers
            and subject to MSRP caps. Model 3 Rear-Wheel Drive not eligible.
          </p>
          <p>
            <sup>2</sup> Starting price of Model 3 Rear-Wheel Drive before
            estimated savings is $38,990, excluding taxes and fees and is
            subject to change. Estimated savings includes $5,000 in
            <span>gas savings</span>
            estimated over five years.
          </p>
          <p>
            <sup>3</sup> Monthly lease payment is $449 before estimated
            <span>gas savings</span> of $100 per month and based on purchase
            price of $44,990, excluding taxes and fees and is subject to change.
            Lease available in select states, requires $2,999 down and is
            subject to credit approval. No security deposit required. Additional
            terms and conditions apply.
          </p>
          <p>
            <sup>4</sup> Price before estimated savings is $77,990, excluding
            taxes and fees. Subject to change. Estimated savings includes $6,500
            in <span>gas savings</span> estimated over five years, the $7,500
            Federal Tax Credit and state incentives, available to eligible
            buyers and subject to MSRP caps. <span>Terms apply</span>.
          </p>
          <p>
            <sup>5</sup> Price before estimated savings is $72,990, excluding
            taxes and fees. Subject to change. Estimated savings includes $6,500
            in gas savings estimated over five years and state incentives,
            available to eligible buyers and subject to MSRP caps.
            <span>Terms apply</span>.
          </p>
        </div>
        <div class="copyright-info">
          <div class="copyright-info-content">Tesla © 2024</div>
          <div class="copyright-info-content">Privacy & Legal</div>
          <div class="copyright-info-content">Vehicle Recalls</div>
          <div class="copyright-info-content">Contact</div>
          <div class="copyright-info-content">News</div>
          <div class="extras">
            <div class="copyright-info-content">Get Updates</div>
            <div class="copyright-info-content">Locations</div>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>

CSS (full code):

body{
    width:100%;
    background-color: white;
    font-family:'Noto Sans Thai',Arial, Helvetica, sans-serif;
}
*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}
@media( max-width:900px ){

 .footer-text p {
        padding-left: 40px;
        padding-right: 40px;
    }   
    .footer-content .copyright-info {
    flex-direction: column;
    }
    .footer-content .copyright-info .extras{
        display: none;
    }
    .footer-content .footer-text{
        width: 600px;
    }

}

.footer-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    padding-bottom: 20px;
    width:100%;
}

 footer{
    width:100%;
}

.footer-text{
    width:100%;
    margin-top: 50px;
    color: rgb(198, 198, 198);
    padding: 0 100px 0 100px;
    text-align: center;
    margin-bottom: 60px;
}
.footer-text p{
    display:inline-block;
    margin-bottom: 20px;
    font-size: 14px;
}
.copyright-info{
    display: flex;
    font-size: 14px;
    text-align: center;
    color: rgb(198, 198, 198);
    padding-bottom: 10px;
    padding-left: 20px;
}
.copyright-info-content{
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
}
.extras{
    display: flex;
}
.footer-text span{
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: bolder;

}
.footer-text span:hover{
    color: white;
}

I have tried removing the padding and margin, thinking that would solve the problem, but once I did that, the text just overflowed.

Answer 1

I would suggest you add box-sizing to it

* {
  box-sizing: border-box;
}