我正在做一个网站，但是当我试图让它响应时，主体没有占据整个宽度，把整个网站弄得一团糟。那么我该怎么解决这个问题呢？
我尝试了min-width:fit-content，但它很奇怪，感觉像放大和缩小。我尝试了margin:0和padding:0。我尝试了max-width的图像，什么也没有发生。主要问题，我认为，是身体，因为当我进入谷歌的响应模式，身体不采取整个宽度。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a {
  color: white;
  text-decoration: none;
  transition: color 0.4s ease;
}

.logo {
  margin-right: 1rem;
}

li {
  list-style: none;
  font-weight: bold;
  transition: background-color 0.5s ease;
}

img {
  cursor: pointer;
}

.link-con {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 4rem;
}

.nav1 {
  background-color: #5222bb;
  color: white;
  padding: 15px 300px;
  font-size: 1.3rem;
}

.nav2 {
  background-color: #5b1fde;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 1.1rem;
}

.nav2 li {
  padding: 2rem;
  cursor: pointer;
}

.nav2 li:hover {
  background-color: white;
}

.nav2 li:hover a {
  color: black;
}

.search {
  display: flex;
  align-items: center;
}

.main-seaction {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5rem;
  gap: 4rem;
}

.main-image {
  background-image: url(mainpageimages/mainpage1.png);
  background-size: cover;
  width: 1400px;
  height: 430px;
  color: white;
  padding: 4rem 10rem;
}

.main-image p {
  font-size: 1.5rem;
}

.main-image h1 {
  font-size: 4rem;
}

.top-sec {
  display: flex;
  gap: 2rem;
  padding: 0 4rem;
  justify-content: space-between;
}

.top-sec2 {
  display: flex;
  flex-direction: row-reverse;
  gap: 6rem;
  padding: 0 4rem;
  justify-content: space-between;
}

.inside-sec {
  margin: 0 5rem;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2rem;
}

.text-box {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h2 {
  font-size: 3rem;
}

p {
  font-size: 1.2rem;
  font-weight: 300;
}

.padding {
  padding: 0 4rem;
}

.top-m {
  margin-top: 7rem;
}

.p-space {
  padding: 1rem 5rem;
}

.cards-con {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 2rem;
}

.card {
  width: 550px;
  height: 400px;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: all;
  transition-duration: 300ms;
}

.card:hover .card-content {
  background: rgb(91, 31, 222);
  background: linear-gradient( 90deg, rgba(91, 31, 222, 1) 0%, rgba(147, 98, 255, 1) 90%, rgba(147, 98, 255, 1) 100%);
}

.card:hover {
  transform: scale(1.01);
  transform-origin: 40% 20%;
}

.card1 {
  background-image: url(mainpageimages/card1.png);
  background-size: cover;
}

.card2 {
  background-image: url(mainpageimages/card2.png);
  background-size: cover;
}

.card3 {
  background-image: url(mainpageimages/card3.png);
  background-size: cover;
}

.card4 {
  background-image: url(mainpageimages/card4.png);
  background-size: cover;
}

.card-content {
  background-color: #5b1fde;
  z-index: 999;
  color: white;
  padding: 1.5rem 2rem;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

button {
  background-color: white;
  border: 1px solid #5b1fde;
  border-radius: 10px;
  margin: 0 4rem;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: rgb(214, 214, 214);
}

.footer {
  background-color: #2e2e2e;
  color: white;
  width: 100%;
  padding: 7rem 14rem;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 2rem 0rem;
  padding-right: 22rem;
  row-gap: 2rem;
  margin-top: 1rem;
  align-items: center;
}

h3 {
  font-size: 2rem;
}

.footer-links {
  font-size: 1.2rem;
}

.flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.grid a:hover {
  color: #0eb072;
  text-decoration: underline;
}

个字符