My navigation and footer are extending beyond the viewport width even though they are both set to 100%. What could I be doing wrong?

I have tried just about everything I could find online. I have a header and footer each with two divs inside. When I set justify-content to space inbetween it pushes the right div out of the view port.

I tried adding box-sizing, changing the margins, setting max widths, and changing the CSS on the overall page. The code I have is below:

`

<header class="main-navigation"><div class="logo"><object data="img/zain-surka.svg" width="130" height="64"> </object></div><nav><ul class="links"><li class="nav-item"><a href="#" class="nav-item">work</a></li><li class="nav-item"><a href="#" class="nav-item">about</a></li><li class="nav-item"><a href="#" class="nav-item">contact</a></li></ul></nav></header><footer id="footer"><div class="contact"><div class="contact-item"><object data="img/phone-icon.svg" width="16" height="16"> </object><a href="#">###.###.####</a></div><div class="contact-item"><object data="img/mail-icon.svg" width="16" height="16"> </object><a href="#">email@gmail.com</a></div></div><div class="socials"><object data="img/Instagram.svg" width="16" height="16" class="social-item"</object><object data="img/Twitter.svg" width="16" height="16" class="social-item"> </object><object data="img/LinkedIn.svg" width="16" height="16" class="social-item"> </object></div></footer>

/* navigation */.main-navigation {    display: flex;    position: relative;    top: 0;    right: 0;    left: 0;    justify-content: space-between;    padding: 30px 60px 30px 60px;    width: 100%;}.links {    list-style-type: none;    display: inline-flex;    padding: 0.83333rem;    align-items: flex-start;    gap: 0.83333rem;}.nav-item {    display: flex;    width: 8.64583rem;    height: 1.3125rem;    justify-content: center;    align-items: center;}/* footer */#footer {    display: flex;    width: 100%;    padding: 0.9375rem 1.25rem;    position: fixed;    bottom: 0;    justify-content: center;    align-items: center;    box-sizing: border-box        /* Footer height */}.contact {    display: flex;    padding: 0.625rem;    align-items: flex-start;    justify-content: center;    gap: 1.5625rem;    width: auto;}.contact-item {    display: flex;    align-items: flex-start;    justify-content: center;    gap: .5rem;}.socials {    display: flex;    width: auto;    gap: 3rem;}.social-item {    display: flex;    align-items: flex-start;}