My Flexbox navbar is extending past the viewport width

Question

Basically the navbar I made at the top extends past the viewport of the webpage no matter what I try doing and I'm not sure why. It should theoretically only extend to 100% the width. Not further...

Please excuse the really long svg file I have in there. Also I'm only a beginner so sorry if the code is a little messy to read.

body {
  text-align: center;
}
nav {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 100%;
  border-radius: 0 0 20px 20px;
  padding: 3px;
  text-align: center;
  color: white;
  font-family: rustica, Helvetica, sans-serif; 
  font-size: 30px;
  z-index: 101;
  border: solid black 4px;
}
#navColor {
  display: inline-flex;
  justify-content: center;
  position: fixed;
  top: 0px;
  left: 0px;
  background-image: linear-gradient(90deg, #d2242a, #77b4ba);
  height: 80px;
  width: 100%;
  border-radius: 0 0 20px 20px;
  margin: 0px;
  padding: 6px;
  filter: opacity(70%);
  text-align: center; 
  z-index: 100;
  backdrop-filter: blur(20px);
}
.mainBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  gap: 40px;
}
.mainItem {
    background-color: #d2232a;
    width: 500px;
    margin-top: 30px;
    font-family: rustica, Helvetica, sans-serif;
    font-size: 30px;
    padding: 0px;
  border: solid black 6px;
  border-radius: 20px;
}
@media (max-width: 1080px) {
    .mainBox {
        grid-template-columns: 1fr 
    }
    .mainItem {
        width: 70%;
        max-width: 550px
    }
}
.flavorTitle {
    border-bottom: solid black 5px;
    margin: 20px 50px 0 50px;
    color: black;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}
.donutimg {
    margin-bottom: 0px;
    padding-bottom: 0px;
    width: 90%;
    height: auto;
}
.donutCaptions {
    margin: -5px;
    font-size: 20px;
  color: black;
}
.orderslider {
    width: 70%;
}
main {
  margin-top: 40px;
}

<!doctype html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
<nav>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body_1" width="102" height="77">

<g transform="matrix(0.045728814 0 0 0.045728814 12.459987 -0)">
    <path d="M1674.06 789.36C 1656.43 792.79 1638.2201 794.6 1619.5901 794.6C 1533.8201 794.6 1456.9401 756.57996 1404.8601 696.48C 1402.4401 696.55 1400.0201 696.6 1397.5901 696.6C 1267.8 696.6 1162.5901 591.38995 1162.5901 461.59998C 1162.5901 424.11 1171.3801 388.68 1187.0001 357.24C 1156.4401 311.94 1138.5901 257.36 1138.5901 198.59999C 1138.5901 152.53 1149.5701 109.02999 1169.04 70.54999C 1091.37 37.099987 1007.63 15.079987 919.94006 6.5699883C 831.6001 25.729988 739.88007 33.66999 649.8301 23.849989C 614.9501 20.04999 553.8301 53.08999 520.8901 67.77999C 475.5901 87.979996 432.24008 112.17999 389.39008 137.06999C 304.99008 186.09999 240.43007 245.38998 179.93007 322.18C 129.58008 386.09 117.84007 474.26 59.100067 532.07996C 33.130066 597.67993 15.200066 667.35 6.540066 739.86C 12.130066 806.73 10.520065 873.94 6.610066 940.89C 14.390066 1005.75 29.580065 1068.3301 51.320065 1127.76C 59.830063 1139.75 67.730064 1152.16 74.92007 1164.98C 99.50007 1208.85 110.24007 1256.6 137.70007 1298.61C 167.76007 1344.59 198.99008 1390.2 243.77008 1423.24C 260.51007 1435.59 278.6501 1445.88 296.24008 1456.96C 356.7201 1495.0599 402.5301 1556.47 463.7301 1589.46C 521.0701 1620.38 608.76013 1661.09 675.0401 1661.72C 736.8301 1662.3099 798.5401 1667.7899 859.5801 1677.33C 937.1401 1675.38 1016.07007 1667.5 1090.55 1644.85C 1170.0901 1620.66 1213.01 1569.53 1280.17 1527.75C 1305.55 1511.96 1332.62 1499.02 1360.0901 1487.34C 1366.3401 1484.6799 1372.6201 1482.09 1378.91 1479.5499C 1421.5801 1462.2799 1468.14 1393.6499 1495.9501 1358.3999C 1529.18 1316.2799 1566.78 1270.0199 1576.9 1216.4799C 1582.5801 1186.3999 1592.34 1157.0999 1605.79 1129.5999C 1615.77 1109.1898 1639.26 1085.8198 1645.23 1064.2799C 1665.01 992.92993 1675.6 917.7599 1675.6 840.1199C 1675.6 823.0799 1675.08 806.16986 1674.07 789.3799L1674.07 789.3799L1674.06 789.36zM840.99005 1139.6C 698.4501 1139.6 582.89 1024.04 582.89 881.5C 582.89 835.06 595.16003 791.49 616.62 753.85L616.62 753.85L596.37 543.6L784.9 629.51C 802.96 625.51 821.73004 623.39 840.99005 623.39C 860.25006 623.39 879.02 625.5 897.0801 629.51L897.0801 629.51L1085.6101 543.6L1065.3601 753.85C 1086.8201 791.5 1099.0901 835.06995 1099.0901 881.5C 1099.0901 1024.04 983.5301 1139.6 840.9901 1139.6z" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
    <path d="M1411.09 471.6C 1411.0901 491.62036 1404.0117 508.70877 1389.8552 522.86523C 1375.6987 537.0217 1358.6104 544.1 1338.59 544.1C 1318.5696 544.1 1301.4812 537.0217 1287.3247 522.86523C 1273.1682 508.70877 1266.09 491.62036 1266.09 471.6C 1266.09 451.5797 1273.1682 434.4913 1287.3247 420.33478C 1301.4812 406.17828 1318.5696 399.10004 1338.59 399.1C 1358.6104 399.10004 1375.6987 406.17828 1389.8552 420.33478C 1404.0117 434.4913 1411.0901 451.5797 1411.09 471.6C 1411.0901 472.4437 1411.0753 473.2871 1411.0458 474.13022" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
    <path d="M1392.09 191.1C 1392.09 206.28784 1386.7202 219.25146 1375.9808 229.99088C 1365.2415 240.73032 1352.2778 246.10002 1337.09 246.1C 1321.9021 246.10002 1308.9385 240.73032 1298.1991 229.99088C 1287.4597 219.25146 1282.0901 206.28784 1282.09 191.1C 1282.0901 175.91219 1287.4597 162.94856 1298.1991 152.20914C 1308.9385 141.46973 1321.9021 136.1 1337.09 136.1C 1352.2778 136.1 1365.2415 141.46973 1375.9808 152.20914C 1386.7202 162.94856 1392.09 175.91219 1392.09 191.1C 1392.09 191.74002 1392.0789 192.37985 1392.0565 193.01949" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
    <path d="M982.59 230.6C 982.5901 243.5787 978.0014 254.65671 968.82404 263.834C 959.6467 273.01135 948.5687 277.60004 935.59 277.6C 922.6114 277.60004 911.5334 273.01135 902.356 263.834C 893.1787 254.65671 888.5901 243.5787 888.59 230.6C 888.5901 217.62132 893.1787 206.54332 902.356 197.366C 911.5334 188.18867 922.6114 183.6 935.59 183.6C 948.5687 183.6 959.6467 188.18867 968.82404 197.366C 978.0014 206.54332 982.5901 217.62132 982.59 230.6C 982.5901 231.14694 982.58057 231.6937 982.5614 232.24028" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M448.59 591.6C 448.59 604.5787 444.00134 615.6567 434.824 624.834C 425.64673 634.01135 414.56873 638.6 401.59 638.6C 388.61133 638.6 377.5333 634.01135 368.356 624.834C 359.17868 615.6567 354.59003 604.5787 354.59 591.6C 354.59003 578.62134 359.17868 567.54333 368.356 558.36597C 377.5333 549.18866 388.61133 544.6 401.59 544.6C 414.56873 544.6 425.64673 549.18866 434.824 558.36597C 444.00134 567.54333 448.59 578.62134 448.59 591.6C 448.59 592.1469 448.58044 592.69366 448.56137 593.24023" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M564.59 293.6C 564.5901 306.5787 560.0014 317.6567 550.82404 326.834C 541.6467 336.01135 530.5687 340.60004 517.59 340.6C 504.61133 340.60004 493.53333 336.01135 484.35602 326.834C 475.1787 317.6567 470.59003 306.5787 470.59003 293.6C 470.59003 280.6213 475.1787 269.5433 484.35602 260.366C 493.53333 251.18867 504.61133 246.6 517.59 246.6C 530.5687 246.6 541.6467 251.18867 550.82404 260.366C 560.0014 269.5433 564.5901 280.6213 564.59 293.6C 564.5901 294.1469 564.5805 294.6937 564.5614 295.2403" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M245.59 773.6C 245.59 786.57874 241.00134 797.65674 231.824 806.834C 222.6467 816.01135 211.5687 820.6 198.59 820.6C 185.61131 820.6 174.53331 816.01135 165.35599 806.834C 156.17867 797.65674 151.59 786.57874 151.59 773.6C 151.59 760.62134 156.17867 749.54333 165.35599 740.36597C 174.53331 731.18866 185.61131 726.6 198.59 726.6C 211.5687 726.6 222.6467 731.18866 231.824 740.36597C 241.00134 749.54333 245.59 760.62134 245.59 773.6C 245.59 774.147 245.58046 774.6937 245.56137 775.24023" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M676.59 1508.6C 676.59 1521.5787 672.00134 1532.6567 662.82404 1541.834C 653.6467 1551.0114 642.5687 1555.6 629.59 1555.6C 616.6113 1555.6 605.5333 1551.0114 596.356 1541.834C 587.1787 1532.6567 582.5901 1521.5787 582.59 1508.6C 582.5901 1495.6213 587.1787 1484.5433 596.356 1475.366C 605.5333 1466.1887 616.6113 1461.6001 629.59 1461.6C 642.5687 1461.6001 653.6467 1466.1887 662.82404 1475.366C 672.00134 1484.5433 676.59 1495.6213 676.59 1508.6C 676.59 1509.147 676.5805 1509.6937 676.5614 1510.2402" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M982.59 1273.6C 982.5901 1286.5786 978.0014 1297.6567 968.82404 1306.834C 959.6467 1316.0114 948.5687 1320.6001 935.59 1320.6C 922.6114 1320.6001 911.5334 1316.0114 902.356 1306.834C 893.1787 1297.6567 888.5901 1286.5786 888.59 1273.6C 888.5901 1260.6213 893.1787 1249.5433 902.356 1240.366C 911.5334 1231.1887 922.6114 1226.6 935.59 1226.6C 948.5687 1226.6 959.6467 1231.1887 968.82404 1240.366C 978.0014 1249.5433 982.5901 1260.6213 982.59 1273.6C 982.5901 1274.147 982.58057 1274.6937 982.5614 1275.2402" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M1193.59 1448.6C 1193.5901 1461.5787 1189.0013 1472.6567 1179.824 1481.834C 1170.6467 1491.0114 1159.5686 1495.6 1146.59 1495.6C 1133.6113 1495.6 1122.5333 1491.0114 1113.356 1481.834C 1104.1787 1472.6567 1099.59 1461.5787 1099.59 1448.6C 1099.59 1435.6213 1104.1787 1424.5433 1113.356 1415.366C 1122.5333 1406.1887 1133.6113 1401.6001 1146.59 1401.6C 1159.5686 1401.6001 1170.6467 1406.1887 1179.824 1415.366C 1189.0013 1424.5433 1193.5901 1435.6213 1193.59 1448.6C 1193.5901 1449.147 1193.5804 1449.6937 1193.5613 1450.2402" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M1337.59 1017.6C 1337.5901 1030.5786 1333.0013 1041.6567 1323.824 1050.834C 1314.6467 1060.0114 1303.5686 1064.6 1290.59 1064.6C 1277.6113 1064.6 1266.5333 1060.0114 1257.356 1050.834C 1248.1787 1041.6567 1243.59 1030.5786 1243.59 1017.6C 1243.59 1004.62134 1248.1787 993.54333 1257.356 984.36597C 1266.5333 975.18866 1277.6113 970.6 1290.59 970.6C 1303.5686 970.6 1314.6467 975.18866 1323.824 984.36597C 1333.0013 993.54333 1337.5901 1004.62134 1337.59 1017.6C 1337.5901 1018.1469 1337.5804 1018.69366 1337.5613 1019.24023" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M517.58997 1139.6C 517.58997 1152.5787 513.00134 1163.6567 503.824 1172.834C 494.64673 1182.0114 483.56873 1186.6 470.59 1186.6C 457.61133 1186.6 446.53333 1182.0114 437.356 1172.834C 428.17868 1163.6567 423.59003 1152.5787 423.59 1139.6C 423.59003 1126.6213 428.17868 1115.5433 437.356 1106.366C 446.53333 1097.1887 457.61133 1092.6001 470.59 1092.6C 483.56873 1092.6001 494.64673 1097.1887 503.824 1106.366C 513.00134 1115.5433 517.58997 1126.6213 517.58997 1139.6C 517.58997 1140.147 517.58044 1140.6937 517.56134 1141.2402" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M245.59 1064.6C 245.59 1077.5787 241.00134 1088.6567 231.824 1097.834C 222.6467 1107.0114 211.5687 1111.6 198.59 1111.6C 185.61131 1111.6 174.53331 1107.0114 165.35599 1097.834C 156.17867 1088.6567 151.59 1077.5787 151.59 1064.6C 151.59 1051.6213 156.17867 1040.5433 165.35599 1031.366C 174.53331 1022.1887 185.61131 1017.60004 198.59 1017.6C 211.5687 1017.60004 222.6467 1022.1887 231.824 1031.366C 241.00134 1040.5433 245.59 1051.6213 245.59 1064.6C 245.59 1065.147 245.58046 1065.6937 245.56137 1066.2402" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M433.59 841.6C 433.59 854.5787 429.00134 865.6567 419.824 874.834C 410.64673 884.01135 399.56873 888.60004 386.59 888.6C 373.61133 888.60004 362.5333 884.01135 353.356 874.834C 344.17868 865.6567 339.59003 854.5787 339.59 841.6C 339.59003 828.62134 344.17868 817.54333 353.356 808.36597C 362.5333 799.18866 373.61133 794.6 386.59 794.6C 399.56873 794.6 410.64673 799.18866 419.824 808.36597C 429.00134 817.54333 433.59 828.62134 433.59 841.6C 433.59 842.1469 433.58044 842.69366 433.56137 843.24023" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M862.59 471.6C 862.5901 484.57874 858.0014 495.65674 848.82404 504.834C 839.6467 514.01135 828.5687 518.6 815.59 518.6C 802.6114 518.6 791.5334 514.01135 782.356 504.834C 773.1787 495.65674 768.5901 484.57874 768.59 471.6C 768.5901 458.62134 773.1787 447.54333 782.356 438.366C 791.5334 429.1887 802.6114 424.60004 815.59 424.6C 828.5687 424.60004 839.6467 429.1887 848.82404 438.366C 858.0014 447.54333 862.5901 458.62134 862.59 471.6C 862.5901 472.14694 862.58057 472.6937 862.5614 473.2403" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M339.59 398.6C 339.59003 411.5787 335.00134 422.6567 325.824 431.834C 316.6467 441.01135 305.5687 445.60004 292.59 445.6C 279.6113 445.60004 268.5333 441.01135 259.356 431.834C 250.17867 422.6567 245.59 411.5787 245.59 398.6C 245.59 385.6213 250.17867 374.5433 259.356 365.366C 268.5333 356.18866 279.6113 351.6 292.59 351.6C 305.5687 351.6 316.6467 356.18866 325.824 365.366C 335.00134 374.5433 339.59003 385.6213 339.59 398.6C 339.59003 399.14694 339.58047 399.69373 339.56137 400.2403" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M768.59 135.6C 768.5901 148.5787 764.0014 159.65671 754.82404 168.83401C 745.6467 178.01135 734.5687 182.6 721.59 182.6C 708.6114 182.6 697.5334 178.01135 688.356 168.83401C 679.1787 159.65671 674.59 148.5787 674.59 135.6C 674.59 122.621315 679.1787 111.543304 688.356 102.36599C 697.5334 93.188675 708.6114 88.600006 721.59 88.600006C 734.5687 88.600006 745.6467 93.188675 754.82404 102.36599C 764.0014 111.543304 768.5901 122.621315 768.59 135.6C 768.5901 136.14694 768.5805 136.6937 768.5614 137.24028" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M887.59 1528.6C 887.59 1541.5787 883.00134 1552.6567 873.82404 1561.834C 864.6467 1571.0114 853.5687 1575.6001 840.59 1575.6C 827.6113 1575.6001 816.5333 1571.0114 807.356 1561.834C 798.1787 1552.6567 793.5901 1541.5787 793.59 1528.6C 793.5901 1515.6213 798.1787 1504.5433 807.356 1495.366C 816.5333 1486.1887 827.6113 1481.6 840.59 1481.6C 853.5687 1481.6 864.6467 1486.1887 873.82404 1495.366C 883.00134 1504.5433 887.59 1515.6213 887.59 1528.6C 887.59 1529.147 887.5805 1529.6937 887.5614 1530.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1485.59 1260.6C 1485.59 1273.5786 1481.0013 1284.6567 1471.824 1293.834C 1462.6467 1303.0114 1451.5687 1307.6 1438.59 1307.6C 1425.6113 1307.6 1414.5333 1303.0114 1405.356 1293.834C 1396.1787 1284.6567 1391.5901 1273.5786 1391.59 1260.6C 1391.5901 1247.6213 1396.1787 1236.5433 1405.356 1227.366C 1414.5333 1218.1887 1425.6113 1213.6 1438.59 1213.6C 1451.5687 1213.6 1462.6467 1218.1887 1471.824 1227.366C 1481.0013 1236.5433 1485.59 1247.6213 1485.59 1260.6C 1485.59 1261.147 1485.5804 1261.6937 1485.5613 1262.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1583.59 955.6C 1583.5901 968.5787 1579.0013 979.6567 1569.824 988.834C 1560.6467 998.01135 1549.5687 1002.60004 1536.59 1002.6C 1523.6113 1002.60004 1512.5333 998.01135 1503.356 988.834C 1494.1787 979.6567 1489.59 968.5787 1489.59 955.6C 1489.59 942.62134 1494.1787 931.54333 1503.356 922.36597C 1512.5333 913.18866 1523.6113 908.6 1536.59 908.6C 1549.5687 908.6 1560.6467 913.18866 1569.824 922.36597C 1579.0013 931.54333 1583.5901 942.62134 1583.59 955.6C 1583.5901 956.1469 1583.5804 956.69366 1583.5613 957.24023" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M1337.59 841.6C 1337.5901 854.5787 1333.0013 865.6567 1323.824 874.834C 1314.6467 884.01135 1303.5686 888.60004 1290.59 888.6C 1277.6113 888.60004 1266.5333 884.01135 1257.356 874.834C 1248.1787 865.6567 1243.59 854.5787 1243.59 841.6C 1243.59 828.62134 1248.1787 817.54333 1257.356 808.36597C 1266.5333 799.18866 1277.6113 794.6 1290.59 794.6C 1303.5686 794.6 1314.6467 799.18866 1323.824 808.36597C 1333.0013 817.54333 1337.5901 828.62134 1337.59 841.6C 1337.5901 842.1469 1337.5804 842.69366 1337.5613 843.24023" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1240.59 1260.6C 1240.59 1273.5786 1236.0013 1284.6567 1226.824 1293.834C 1217.6467 1303.0114 1206.5686 1307.6 1193.59 1307.6C 1180.6113 1307.6 1169.5333 1303.0114 1160.356 1293.834C 1151.1787 1284.6567 1146.59 1273.5786 1146.59 1260.6C 1146.59 1247.6213 1151.1787 1236.5433 1160.356 1227.366C 1169.5333 1218.1887 1180.6113 1213.6 1193.59 1213.6C 1206.5686 1213.6 1217.6467 1218.1887 1226.824 1227.366C 1236.0013 1236.5433 1240.59 1247.6213 1240.59 1260.6C 1240.59 1261.147 1240.5804 1261.6937 1240.5613 1262.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M433.59 1354.6C 433.59 1367.5786 429.00134 1378.6567 419.824 1387.834C 410.64673 1397.0114 399.56873 1401.6001 386.59 1401.6C 373.61133 1401.6001 362.5333 1397.0114 353.356 1387.834C 344.17868 1378.6567 339.59003 1367.5786 339.59 1354.6C 339.59003 1341.6213 344.17868 1330.5433 353.356 1321.366C 362.5333 1312.1887 373.61133 1307.6 386.59 1307.6C 399.56873 1307.6 410.64673 1312.1887 419.824 1321.366C 429.00134 1330.5433 433.59 1341.6213 433.59 1354.6C 433.59 1355.147 433.58044 1355.6937 433.56137 1356.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M676.59 1320.6C 676.59 1333.5786 672.00134 1344.6567 662.82404 1353.834C 653.6467 1363.0114 642.5687 1367.6 629.59 1367.6C 616.6113 1367.6 605.5333 1363.0114 596.356 1353.834C 587.1787 1344.6567 582.5901 1333.5786 582.59 1320.6C 582.5901 1307.6213 587.1787 1296.5433 596.356 1287.366C 605.5333 1278.1887 616.6113 1273.6 629.59 1273.6C 642.5687 1273.6 653.6467 1278.1887 662.82404 1287.366C 672.00134 1296.5433 676.59 1307.6213 676.59 1320.6C 676.59 1321.147 676.5805 1321.6937 676.5614 1322.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1679.09 505.1C 1679.09 515.86957 1675.2823 525.06195 1667.6671 532.6772C 1660.0519 540.2924 1650.8595 544.1 1640.09 544.1C 1629.3204 544.1 1620.128 540.2924 1612.5128 532.6772C 1604.8976 525.06195 1601.09 515.86957 1601.09 505.1C 1601.09 494.33047 1604.8976 485.1381 1612.5128 477.52283C 1620.128 469.90762 1629.3204 466.1 1640.09 466.1C 1650.8595 466.1 1660.0519 469.90762 1667.6671 477.52283C 1675.2823 485.1381 1679.09 494.33047 1679.09 505.1C 1679.09 505.55386 1679.082 506.00757 1679.0662 506.4611" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
</g>
</svg>
<p>Menu</p>
<p>Find Us</p>
<p>Rewards</p>
</nav>
<div id="navColor"></div>

<main>
  <div class="mainBox">
      <div class="mainItem">
<h3 class="flavorTitle">Original Glazed</h3>
        <img src="https://i.ibb.co/rxr7xvy/Glazed-Nut.png" alt="Glazed Donut" class= "donutimg"/> 
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem"> 
<h3 class="flavorTitle">Vanilla</h3>
        <img src="https://i.ibb.co/gJVxBrx/VanNut.png" alt="Vanilla Donut" class= "donutimg"/> 
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
<h3 class="flavorTitle">Strawberry</h3>
        <img src="https://i.ibb.co/tpjsymf/StrawNut.png" alt="Strawberry" class= "donutimg"/> 
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">   
<h3 class="flavorTitle">Chocolate</h3>
        <img src="https://i.ibb.co/L6NSQCf/ChocoNut.png" alt="Chocolate" class= "donutimg"/> 
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
<h3 class="flavorTitle">Boston Creme</h3>
        <img src="https://i.ibb.co/C2Lq5MT/Boston-Nut.png" alt="Boston Creme" class= "donutimg"/> 
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
<h3 class="flavorTitle">Jelly</h3>
        <img src="https://i.ibb.co/5skyR1X/JellyNut.png" alt="Jelly" class= "donutimg"/> 
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
    </div>
</main>
 </body>
</html>

AStombaugh · Answer 1 · 2022-06-03T16:12:07.417

Add box-sizing: border-box;. In this case, I just applied it to the entire document. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing That will ensure that the browser takes into account your borders and padding when calculating your element's sizing.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  text-align: center;
}

nav {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 100%;
  border-radius: 0 0 20px 20px;
  padding: 3px;
  text-align: center;
  color: white;
  font-family: rustica, Helvetica, sans-serif;
  font-size: 30px;
  z-index: 101;
  border: solid black 4px;
}

#navColor {
  display: inline-flex;
  justify-content: center;
  position: fixed;
  top: 0px;
  left: 0px;
  background-image: linear-gradient(90deg, #d2242a, #77b4ba);
  height: 80px;
  width: 100%;
  border-radius: 0 0 20px 20px;
  margin: 0px;
  padding: 6px;
  filter: opacity(70%);
  text-align: center;
  z-index: 100;
  backdrop-filter: blur(20px);
}

.mainBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 40px;
}

.mainItem {
  background-color: #d2232a;
  width: 500px;
  margin-top: 30px;
  font-family: rustica, Helvetica, sans-serif;
  font-size: 30px;
  padding: 0px;
  border: solid black 6px;
  border-radius: 20px;
}

@media (max-width: 1080px) {
  .mainBox {
    grid-template-columns: 1fr
  }
  .mainItem {
    width: 70%;
    max-width: 550px
  }
}

.flavorTitle {
  border-bottom: solid black 5px;
  margin: 20px 50px 0 50px;
  color: black;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
}

.donutimg {
  margin-bottom: 0px;
  padding-bottom: 0px;
  width: 90%;
  height: auto;
}

.donutCaptions {
  margin: -5px;
  font-size: 20px;
  color: black;
}

.orderslider {
  width: 70%;
}

main {
  margin-top: 40px;
}

<!doctype html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body_1" width="102" height="77">

<g transform="matrix(0.045728814 0 0 0.045728814 12.459987 -0)">
    <path d="M1674.06 789.36C 1656.43 792.79 1638.2201 794.6 1619.5901 794.6C 1533.8201 794.6 1456.9401 756.57996 1404.8601 696.48C 1402.4401 696.55 1400.0201 696.6 1397.5901 696.6C 1267.8 696.6 1162.5901 591.38995 1162.5901 461.59998C 1162.5901 424.11 1171.3801 388.68 1187.0001 357.24C 1156.4401 311.94 1138.5901 257.36 1138.5901 198.59999C 1138.5901 152.53 1149.5701 109.02999 1169.04 70.54999C 1091.37 37.099987 1007.63 15.079987 919.94006 6.5699883C 831.6001 25.729988 739.88007 33.66999 649.8301 23.849989C 614.9501 20.04999 553.8301 53.08999 520.8901 67.77999C 475.5901 87.979996 432.24008 112.17999 389.39008 137.06999C 304.99008 186.09999 240.43007 245.38998 179.93007 322.18C 129.58008 386.09 117.84007 474.26 59.100067 532.07996C 33.130066 597.67993 15.200066 667.35 6.540066 739.86C 12.130066 806.73 10.520065 873.94 6.610066 940.89C 14.390066 1005.75 29.580065 1068.3301 51.320065 1127.76C 59.830063 1139.75 67.730064 1152.16 74.92007 1164.98C 99.50007 1208.85 110.24007 1256.6 137.70007 1298.61C 167.76007 1344.59 198.99008 1390.2 243.77008 1423.24C 260.51007 1435.59 278.6501 1445.88 296.24008 1456.96C 356.7201 1495.0599 402.5301 1556.47 463.7301 1589.46C 521.0701 1620.38 608.76013 1661.09 675.0401 1661.72C 736.8301 1662.3099 798.5401 1667.7899 859.5801 1677.33C 937.1401 1675.38 1016.07007 1667.5 1090.55 1644.85C 1170.0901 1620.66 1213.01 1569.53 1280.17 1527.75C 1305.55 1511.96 1332.62 1499.02 1360.0901 1487.34C 1366.3401 1484.6799 1372.6201 1482.09 1378.91 1479.5499C 1421.5801 1462.2799 1468.14 1393.6499 1495.9501 1358.3999C 1529.18 1316.2799 1566.78 1270.0199 1576.9 1216.4799C 1582.5801 1186.3999 1592.34 1157.0999 1605.79 1129.5999C 1615.77 1109.1898 1639.26 1085.8198 1645.23 1064.2799C 1665.01 992.92993 1675.6 917.7599 1675.6 840.1199C 1675.6 823.0799 1675.08 806.16986 1674.07 789.3799L1674.07 789.3799L1674.06 789.36zM840.99005 1139.6C 698.4501 1139.6 582.89 1024.04 582.89 881.5C 582.89 835.06 595.16003 791.49 616.62 753.85L616.62 753.85L596.37 543.6L784.9 629.51C 802.96 625.51 821.73004 623.39 840.99005 623.39C 860.25006 623.39 879.02 625.5 897.0801 629.51L897.0801 629.51L1085.6101 543.6L1065.3601 753.85C 1086.8201 791.5 1099.0901 835.06995 1099.0901 881.5C 1099.0901 1024.04 983.5301 1139.6 840.9901 1139.6z" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
    <path d="M1411.09 471.6C 1411.0901 491.62036 1404.0117 508.70877 1389.8552 522.86523C 1375.6987 537.0217 1358.6104 544.1 1338.59 544.1C 1318.5696 544.1 1301.4812 537.0217 1287.3247 522.86523C 1273.1682 508.70877 1266.09 491.62036 1266.09 471.6C 1266.09 451.5797 1273.1682 434.4913 1287.3247 420.33478C 1301.4812 406.17828 1318.5696 399.10004 1338.59 399.1C 1358.6104 399.10004 1375.6987 406.17828 1389.8552 420.33478C 1404.0117 434.4913 1411.0901 451.5797 1411.09 471.6C 1411.0901 472.4437 1411.0753 473.2871 1411.0458 474.13022" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
    <path d="M1392.09 191.1C 1392.09 206.28784 1386.7202 219.25146 1375.9808 229.99088C 1365.2415 240.73032 1352.2778 246.10002 1337.09 246.1C 1321.9021 246.10002 1308.9385 240.73032 1298.1991 229.99088C 1287.4597 219.25146 1282.0901 206.28784 1282.09 191.1C 1282.0901 175.91219 1287.4597 162.94856 1298.1991 152.20914C 1308.9385 141.46973 1321.9021 136.1 1337.09 136.1C 1352.2778 136.1 1365.2415 141.46973 1375.9808 152.20914C 1386.7202 162.94856 1392.09 175.91219 1392.09 191.1C 1392.09 191.74002 1392.0789 192.37985 1392.0565 193.01949" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
    <path d="M982.59 230.6C 982.5901 243.5787 978.0014 254.65671 968.82404 263.834C 959.6467 273.01135 948.5687 277.60004 935.59 277.6C 922.6114 277.60004 911.5334 273.01135 902.356 263.834C 893.1787 254.65671 888.5901 243.5787 888.59 230.6C 888.5901 217.62132 893.1787 206.54332 902.356 197.366C 911.5334 188.18867 922.6114 183.6 935.59 183.6C 948.5687 183.6 959.6467 188.18867 968.82404 197.366C 978.0014 206.54332 982.5901 217.62132 982.59 230.6C 982.5901 231.14694 982.58057 231.6937 982.5614 232.24028" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M448.59 591.6C 448.59 604.5787 444.00134 615.6567 434.824 624.834C 425.64673 634.01135 414.56873 638.6 401.59 638.6C 388.61133 638.6 377.5333 634.01135 368.356 624.834C 359.17868 615.6567 354.59003 604.5787 354.59 591.6C 354.59003 578.62134 359.17868 567.54333 368.356 558.36597C 377.5333 549.18866 388.61133 544.6 401.59 544.6C 414.56873 544.6 425.64673 549.18866 434.824 558.36597C 444.00134 567.54333 448.59 578.62134 448.59 591.6C 448.59 592.1469 448.58044 592.69366 448.56137 593.24023" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M564.59 293.6C 564.5901 306.5787 560.0014 317.6567 550.82404 326.834C 541.6467 336.01135 530.5687 340.60004 517.59 340.6C 504.61133 340.60004 493.53333 336.01135 484.35602 326.834C 475.1787 317.6567 470.59003 306.5787 470.59003 293.6C 470.59003 280.6213 475.1787 269.5433 484.35602 260.366C 493.53333 251.18867 504.61133 246.6 517.59 246.6C 530.5687 246.6 541.6467 251.18867 550.82404 260.366C 560.0014 269.5433 564.5901 280.6213 564.59 293.6C 564.5901 294.1469 564.5805 294.6937 564.5614 295.2403" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M245.59 773.6C 245.59 786.57874 241.00134 797.65674 231.824 806.834C 222.6467 816.01135 211.5687 820.6 198.59 820.6C 185.61131 820.6 174.53331 816.01135 165.35599 806.834C 156.17867 797.65674 151.59 786.57874 151.59 773.6C 151.59 760.62134 156.17867 749.54333 165.35599 740.36597C 174.53331 731.18866 185.61131 726.6 198.59 726.6C 211.5687 726.6 222.6467 731.18866 231.824 740.36597C 241.00134 749.54333 245.59 760.62134 245.59 773.6C 245.59 774.147 245.58046 774.6937 245.56137 775.24023" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M676.59 1508.6C 676.59 1521.5787 672.00134 1532.6567 662.82404 1541.834C 653.6467 1551.0114 642.5687 1555.6 629.59 1555.6C 616.6113 1555.6 605.5333 1551.0114 596.356 1541.834C 587.1787 1532.6567 582.5901 1521.5787 582.59 1508.6C 582.5901 1495.6213 587.1787 1484.5433 596.356 1475.366C 605.5333 1466.1887 616.6113 1461.6001 629.59 1461.6C 642.5687 1461.6001 653.6467 1466.1887 662.82404 1475.366C 672.00134 1484.5433 676.59 1495.6213 676.59 1508.6C 676.59 1509.147 676.5805 1509.6937 676.5614 1510.2402" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M982.59 1273.6C 982.5901 1286.5786 978.0014 1297.6567 968.82404 1306.834C 959.6467 1316.0114 948.5687 1320.6001 935.59 1320.6C 922.6114 1320.6001 911.5334 1316.0114 902.356 1306.834C 893.1787 1297.6567 888.5901 1286.5786 888.59 1273.6C 888.5901 1260.6213 893.1787 1249.5433 902.356 1240.366C 911.5334 1231.1887 922.6114 1226.6 935.59 1226.6C 948.5687 1226.6 959.6467 1231.1887 968.82404 1240.366C 978.0014 1249.5433 982.5901 1260.6213 982.59 1273.6C 982.5901 1274.147 982.58057 1274.6937 982.5614 1275.2402" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M1193.59 1448.6C 1193.5901 1461.5787 1189.0013 1472.6567 1179.824 1481.834C 1170.6467 1491.0114 1159.5686 1495.6 1146.59 1495.6C 1133.6113 1495.6 1122.5333 1491.0114 1113.356 1481.834C 1104.1787 1472.6567 1099.59 1461.5787 1099.59 1448.6C 1099.59 1435.6213 1104.1787 1424.5433 1113.356 1415.366C 1122.5333 1406.1887 1133.6113 1401.6001 1146.59 1401.6C 1159.5686 1401.6001 1170.6467 1406.1887 1179.824 1415.366C 1189.0013 1424.5433 1193.5901 1435.6213 1193.59 1448.6C 1193.5901 1449.147 1193.5804 1449.6937 1193.5613 1450.2402" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M1337.59 1017.6C 1337.5901 1030.5786 1333.0013 1041.6567 1323.824 1050.834C 1314.6467 1060.0114 1303.5686 1064.6 1290.59 1064.6C 1277.6113 1064.6 1266.5333 1060.0114 1257.356 1050.834C 1248.1787 1041.6567 1243.59 1030.5786 1243.59 1017.6C 1243.59 1004.62134 1248.1787 993.54333 1257.356 984.36597C 1266.5333 975.18866 1277.6113 970.6 1290.59 970.6C 1303.5686 970.6 1314.6467 975.18866 1323.824 984.36597C 1333.0013 993.54333 1337.5901 1004.62134 1337.59 1017.6C 1337.5901 1018.1469 1337.5804 1018.69366 1337.5613 1019.24023" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M517.58997 1139.6C 517.58997 1152.5787 513.00134 1163.6567 503.824 1172.834C 494.64673 1182.0114 483.56873 1186.6 470.59 1186.6C 457.61133 1186.6 446.53333 1182.0114 437.356 1172.834C 428.17868 1163.6567 423.59003 1152.5787 423.59 1139.6C 423.59003 1126.6213 428.17868 1115.5433 437.356 1106.366C 446.53333 1097.1887 457.61133 1092.6001 470.59 1092.6C 483.56873 1092.6001 494.64673 1097.1887 503.824 1106.366C 513.00134 1115.5433 517.58997 1126.6213 517.58997 1139.6C 517.58997 1140.147 517.58044 1140.6937 517.56134 1141.2402" stroke="none" fill="#6FCCDD" fill-rule="nonzero" />
    <path d="M245.59 1064.6C 245.59 1077.5787 241.00134 1088.6567 231.824 1097.834C 222.6467 1107.0114 211.5687 1111.6 198.59 1111.6C 185.61131 1111.6 174.53331 1107.0114 165.35599 1097.834C 156.17867 1088.6567 151.59 1077.5787 151.59 1064.6C 151.59 1051.6213 156.17867 1040.5433 165.35599 1031.366C 174.53331 1022.1887 185.61131 1017.60004 198.59 1017.6C 211.5687 1017.60004 222.6467 1022.1887 231.824 1031.366C 241.00134 1040.5433 245.59 1051.6213 245.59 1064.6C 245.59 1065.147 245.58046 1065.6937 245.56137 1066.2402" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M433.59 841.6C 433.59 854.5787 429.00134 865.6567 419.824 874.834C 410.64673 884.01135 399.56873 888.60004 386.59 888.6C 373.61133 888.60004 362.5333 884.01135 353.356 874.834C 344.17868 865.6567 339.59003 854.5787 339.59 841.6C 339.59003 828.62134 344.17868 817.54333 353.356 808.36597C 362.5333 799.18866 373.61133 794.6 386.59 794.6C 399.56873 794.6 410.64673 799.18866 419.824 808.36597C 429.00134 817.54333 433.59 828.62134 433.59 841.6C 433.59 842.1469 433.58044 842.69366 433.56137 843.24023" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M862.59 471.6C 862.5901 484.57874 858.0014 495.65674 848.82404 504.834C 839.6467 514.01135 828.5687 518.6 815.59 518.6C 802.6114 518.6 791.5334 514.01135 782.356 504.834C 773.1787 495.65674 768.5901 484.57874 768.59 471.6C 768.5901 458.62134 773.1787 447.54333 782.356 438.366C 791.5334 429.1887 802.6114 424.60004 815.59 424.6C 828.5687 424.60004 839.6467 429.1887 848.82404 438.366C 858.0014 447.54333 862.5901 458.62134 862.59 471.6C 862.5901 472.14694 862.58057 472.6937 862.5614 473.2403" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M339.59 398.6C 339.59003 411.5787 335.00134 422.6567 325.824 431.834C 316.6467 441.01135 305.5687 445.60004 292.59 445.6C 279.6113 445.60004 268.5333 441.01135 259.356 431.834C 250.17867 422.6567 245.59 411.5787 245.59 398.6C 245.59 385.6213 250.17867 374.5433 259.356 365.366C 268.5333 356.18866 279.6113 351.6 292.59 351.6C 305.5687 351.6 316.6467 356.18866 325.824 365.366C 335.00134 374.5433 339.59003 385.6213 339.59 398.6C 339.59003 399.14694 339.58047 399.69373 339.56137 400.2403" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M768.59 135.6C 768.5901 148.5787 764.0014 159.65671 754.82404 168.83401C 745.6467 178.01135 734.5687 182.6 721.59 182.6C 708.6114 182.6 697.5334 178.01135 688.356 168.83401C 679.1787 159.65671 674.59 148.5787 674.59 135.6C 674.59 122.621315 679.1787 111.543304 688.356 102.36599C 697.5334 93.188675 708.6114 88.600006 721.59 88.600006C 734.5687 88.600006 745.6467 93.188675 754.82404 102.36599C 764.0014 111.543304 768.5901 122.621315 768.59 135.6C 768.5901 136.14694 768.5805 136.6937 768.5614 137.24028" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M887.59 1528.6C 887.59 1541.5787 883.00134 1552.6567 873.82404 1561.834C 864.6467 1571.0114 853.5687 1575.6001 840.59 1575.6C 827.6113 1575.6001 816.5333 1571.0114 807.356 1561.834C 798.1787 1552.6567 793.5901 1541.5787 793.59 1528.6C 793.5901 1515.6213 798.1787 1504.5433 807.356 1495.366C 816.5333 1486.1887 827.6113 1481.6 840.59 1481.6C 853.5687 1481.6 864.6467 1486.1887 873.82404 1495.366C 883.00134 1504.5433 887.59 1515.6213 887.59 1528.6C 887.59 1529.147 887.5805 1529.6937 887.5614 1530.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1485.59 1260.6C 1485.59 1273.5786 1481.0013 1284.6567 1471.824 1293.834C 1462.6467 1303.0114 1451.5687 1307.6 1438.59 1307.6C 1425.6113 1307.6 1414.5333 1303.0114 1405.356 1293.834C 1396.1787 1284.6567 1391.5901 1273.5786 1391.59 1260.6C 1391.5901 1247.6213 1396.1787 1236.5433 1405.356 1227.366C 1414.5333 1218.1887 1425.6113 1213.6 1438.59 1213.6C 1451.5687 1213.6 1462.6467 1218.1887 1471.824 1227.366C 1481.0013 1236.5433 1485.59 1247.6213 1485.59 1260.6C 1485.59 1261.147 1485.5804 1261.6937 1485.5613 1262.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1583.59 955.6C 1583.5901 968.5787 1579.0013 979.6567 1569.824 988.834C 1560.6467 998.01135 1549.5687 1002.60004 1536.59 1002.6C 1523.6113 1002.60004 1512.5333 998.01135 1503.356 988.834C 1494.1787 979.6567 1489.59 968.5787 1489.59 955.6C 1489.59 942.62134 1494.1787 931.54333 1503.356 922.36597C 1512.5333 913.18866 1523.6113 908.6 1536.59 908.6C 1549.5687 908.6 1560.6467 913.18866 1569.824 922.36597C 1579.0013 931.54333 1583.5901 942.62134 1583.59 955.6C 1583.5901 956.1469 1583.5804 956.69366 1583.5613 957.24023" stroke="none" fill="#F0C2B2" fill-rule="nonzero" />
    <path d="M1337.59 841.6C 1337.5901 854.5787 1333.0013 865.6567 1323.824 874.834C 1314.6467 884.01135 1303.5686 888.60004 1290.59 888.6C 1277.6113 888.60004 1266.5333 884.01135 1257.356 874.834C 1248.1787 865.6567 1243.59 854.5787 1243.59 841.6C 1243.59 828.62134 1248.1787 817.54333 1257.356 808.36597C 1266.5333 799.18866 1277.6113 794.6 1290.59 794.6C 1303.5686 794.6 1314.6467 799.18866 1323.824 808.36597C 1333.0013 817.54333 1337.5901 828.62134 1337.59 841.6C 1337.5901 842.1469 1337.5804 842.69366 1337.5613 843.24023" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1240.59 1260.6C 1240.59 1273.5786 1236.0013 1284.6567 1226.824 1293.834C 1217.6467 1303.0114 1206.5686 1307.6 1193.59 1307.6C 1180.6113 1307.6 1169.5333 1303.0114 1160.356 1293.834C 1151.1787 1284.6567 1146.59 1273.5786 1146.59 1260.6C 1146.59 1247.6213 1151.1787 1236.5433 1160.356 1227.366C 1169.5333 1218.1887 1180.6113 1213.6 1193.59 1213.6C 1206.5686 1213.6 1217.6467 1218.1887 1226.824 1227.366C 1236.0013 1236.5433 1240.59 1247.6213 1240.59 1260.6C 1240.59 1261.147 1240.5804 1261.6937 1240.5613 1262.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M433.59 1354.6C 433.59 1367.5786 429.00134 1378.6567 419.824 1387.834C 410.64673 1397.0114 399.56873 1401.6001 386.59 1401.6C 373.61133 1401.6001 362.5333 1397.0114 353.356 1387.834C 344.17868 1378.6567 339.59003 1367.5786 339.59 1354.6C 339.59003 1341.6213 344.17868 1330.5433 353.356 1321.366C 362.5333 1312.1887 373.61133 1307.6 386.59 1307.6C 399.56873 1307.6 410.64673 1312.1887 419.824 1321.366C 429.00134 1330.5433 433.59 1341.6213 433.59 1354.6C 433.59 1355.147 433.58044 1355.6937 433.56137 1356.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M676.59 1320.6C 676.59 1333.5786 672.00134 1344.6567 662.82404 1353.834C 653.6467 1363.0114 642.5687 1367.6 629.59 1367.6C 616.6113 1367.6 605.5333 1363.0114 596.356 1353.834C 587.1787 1344.6567 582.5901 1333.5786 582.59 1320.6C 582.5901 1307.6213 587.1787 1296.5433 596.356 1287.366C 605.5333 1278.1887 616.6113 1273.6 629.59 1273.6C 642.5687 1273.6 653.6467 1278.1887 662.82404 1287.366C 672.00134 1296.5433 676.59 1307.6213 676.59 1320.6C 676.59 1321.147 676.5805 1321.6937 676.5614 1322.2402" stroke="none" fill="#B9859F" fill-rule="nonzero" />
    <path d="M1679.09 505.1C 1679.09 515.86957 1675.2823 525.06195 1667.6671 532.6772C 1660.0519 540.2924 1650.8595 544.1 1640.09 544.1C 1629.3204 544.1 1620.128 540.2924 1612.5128 532.6772C 1604.8976 525.06195 1601.09 515.86957 1601.09 505.1C 1601.09 494.33047 1604.8976 485.1381 1612.5128 477.52283C 1620.128 469.90762 1629.3204 466.1 1640.09 466.1C 1650.8595 466.1 1660.0519 469.90762 1667.6671 477.52283C 1675.2823 485.1381 1679.09 494.33047 1679.09 505.1C 1679.09 505.55386 1679.082 506.00757 1679.0662 506.4611" stroke="#000000" stroke-width="20" fill="#77B4BA" fill-rule="nonzero" />
</g>
</svg>
    <p>Menu</p>
    <p>Find Us</p>
    <p>Rewards</p>
  </nav>
  <div id="navColor"></div>

  <main>
    <div class="mainBox">
      <div class="mainItem">
        <h3 class="flavorTitle">Original Glazed</h3>
        <img src="https://i.ibb.co/rxr7xvy/Glazed-Nut.png" alt="Glazed Donut" class="donutimg" />
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
        <h3 class="flavorTitle">Vanilla</h3>
        <img src="https://i.ibb.co/gJVxBrx/VanNut.png" alt="Vanilla Donut" class="donutimg" />
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
        <h3 class="flavorTitle">Strawberry</h3>
        <img src="https://i.ibb.co/tpjsymf/StrawNut.png" alt="Strawberry" class="donutimg" />
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
        <h3 class="flavorTitle">Chocolate</h3>
        <img src="https://i.ibb.co/L6NSQCf/ChocoNut.png" alt="Chocolate" class="donutimg" />
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
        <h3 class="flavorTitle">Boston Creme</h3>
        <img src="https://i.ibb.co/C2Lq5MT/Boston-Nut.png" alt="Boston Creme" class="donutimg" />
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
      <div class="mainItem">
        <h3 class="flavorTitle">Jelly</h3>
        <img src="https://i.ibb.co/5skyR1X/JellyNut.png" alt="Jelly" class="donutimg" />
        <p class="donutCaptions">Quantity:</p>
        <input class="orderslider" type="range">
      </div>
    </div>
  </main>
</body>

</html>

`box-sizing` actually does not factor in margins no matter what the setting. The difference is only in the inclusion of padding and border size in the calculation. — Stephen M Irving, Jun 03 '22 at 16:10

score 0 · Answer 2 · edited Jan 23 '23 at 12:55

0

*,
:before,
:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

Add this! Box-sizing is how the total height and width of elements are calculated under-the-hood in CSS and this will make it factor in padding and border width which makes everything much easier.

edited Jan 23 '23 at 12:55

Stephen M Irving

1,324
9
20

answered Jun 03 '22 at 15:54

Ines Germanski

11
4

My Flexbox navbar is extending past the viewport width

Basically the navbar I made at the top extends past the viewport of the webpage no matter what I try doing and I'm not sure why. It should theoretically only extend to 100% the width. Not further...

2 Answers2