"HTML/CSS Issue: Unwanted Space Throughout My Web Page"

`# Hello Stack Overflow community

I’m facing a challenging issue with my website, and I could really use some expert assistance to resolve it. My entire webpage seems to have an unwanted space, and I’ve been struggling to pinpoint the cause.

Description of the Issue:

My website has an unexpected white space at the top and on the sides, making it look misaligned.
This space is visible on both desktop and mobile views.
I’ve examined the elements using Chrome DevTools, but I couldn’t find any margin or padding issues that would justify this space.

I’ve reviewed the CSS and HTML for any margin or padding issues but couldn’t identify the problem.
I’ve also checked the parent elements for any inherited styles that might be causing this space.
i have added a padding 0 and marging 0 to the main container and the body but it doesnt help
you can see the code below
best regards`

/****** General ***********/

* {
  font-family: "Raleway", sans-serif;
}

:root {
  --main-color: #0065fc;
  --main-bg-color: #f2f2f2;
  --filter-bg-color: #deebff;
}

.fa-solid {
  color: var(--main-color);
}

body {
  display: flex;
  justify-content: center;
}

.main-container {
  width: 100%;
  max-width: 1440px;
  padding: 0 50px;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

.section-title {
  margin: 0;
  font-size: 22px;
}

.card {
  background-color: white;
  border-radius: 20px;
  padding: 5px;
  filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
}

.card img {
  object-fit: cover;
}

.card-title {
  font-size: 16px;
}

.euro {
  font-weight: 700;
}

.neutral-star {
  color: var(--main-bg-color);
}

/****** Hebergements And Populaires ***********/
.hebergements-and-populaires {
  display: flex;
  justify-content: space-between;
}

.hebergements-and-populaires section {
  background-color: var(--main-bg-color);
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
}

/****** Hebergements ***********/
.hebergements {
  width: 65%;
}
.hebergements-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.875rem;
}
/**************************/

.hebergements-cards img {
  display: flex;
  height: 7.75rem;
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/****** Populaires ***********/
.populaires {
  width: 32%;
}

.populaires-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.populaires-cards .card {
  display: flex;
  margin-top: 33px;
}

.populaires-cards img {
  width: 33%;
  height: 136px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.populaires-cards .card-content {
  width: 67%;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.populaires-cards .card-title {
  margin-top: 10px;
  margin-bottom: 4px;
}

.populaires-cards .card-subtitle {
  margin: 0;
}

.populaires-cards .card-rating {
  margin-bottom: 5px;
}

/* Flexbox container for aligning items in one line */
.button-container {
  display: flex;
  align-items: center;
  display: flex;

  gap: 0.9375rem;
}
/* Style for the buttons */
.filter-button {
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  height: 3.125rem;
  padding: 0.25rem 1.1875rem;

  border-radius: 1.5625rem;
  border: 2px solid var(--grey-tint-2, #d9d9d9);
}
.filter-button i {
  padding-right: 0.62rem;
}
/* Hover effect */
.filter-button:hover {
  background: var(
    --blue-light,
    #deebff
  ); /* Change the background color on hover */
}

.activites {
  width: 100%;
  padding-top: 20px;
}
.activites-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.875rem;
}

.activites-card img {
  height: 23.75rem;
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
footer {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.logo img {
  width: 3.81813rem;
  height: 1.1875rem;
}

nav a:hover {
  border-top: 2px solid #0056b3;
  color: #0065fc;
}

.search-bar {
  display: flex;
  width: 23.5625rem;
  height: 3.0625rem;
  flex-direction: row;
  align-items: center;
  border-radius: 0.9375rem;
  border: 1px solid var(--grey, #f2f2f2);
  background: var(--white, #fff);
  position: relative; /* Add this to create a positioning context for child elements */
}

.search-input {
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  flex-grow: 1;
}

.search-button {
  height: 3.0625rem;
  padding: 0.9375rem 1rem;
  border-radius: 0rem 0.9375rem 0.9375rem 0rem;
  border: 1px solid var(--blue, #0065fc);
  background: var(--blue, #0065fc);
  position: absolute; /* Position the button relative to its container */
  right: 0; /* Align the button to the right of the container */
  cursor: pointer; /* Add cursor pointer to indicate interactivity */
}

.search-button .mobile-icon i {
  display: none;
}

.desktop-text {
  color: var(--White, #fff);
  text-align: center;
  font-family: Raleway;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.locali {
  background-color: #d9d9d9; /* Add your desired background color here */
  display: flex;
  align-items: center;
  width: 3.125rem;
  height: 3.0625rem;
  border-radius: 0.9375rem 0 0 0.9375rem;
}

.locali i {
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

/* Le code ci-dessous correspond à la version responsive uniquement */

/****** Media queries ***********/
/* Medium devices (tablets, less/equal than 1024px) */
@media (max-width: 1024px) {
  .hebergements-and-populaires {
    flex-direction: column;
  }

  .hebergements {
    width: 100%;
  }

  .populaires {
    width: 100%;
    margin-top: 50px;
  }

  .populaires-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .populaires-cards a {
    width: 30%;
  }

  .populaires-cards .card-title {
    font-size: 14px;
  }

  .populaires-cards .card-subtitle {
    font-size: 13px;
  }
}

/* Small devices (phones, less than 768px) */

@media (max-width: 767.98px) {
  body {
    margin: 0;
  }
  .main-container {
    display: flex;
    width: 23.4375rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
    padding: 0 10px;
    margin: 0;
  }

  .hebergements-and-populaires {
    flex-direction: column-reverse;
  }
  /* ... */

  .populaires {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .populaires-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .populaires-cards a {
    width: 100%;
  }

  .hebergements {
    margin-bottom: 50px;
  }
  .hebergements-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hebergements-cards a {
    width: 100%;
  }
  .infogroup {
    word-wrap: break-word;
    flex-wrap: wrap;
    display: flex;
    padding: 0rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.1875rem;
  }
  .headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .button-container {
    flex-wrap: wrap;

    display: grid;
    grid-template-columns: 1fr 1fr; /* First and second columns are equal width */
  }

  .filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    border-radius: 1.5625rem;
    border: 2px solid var(--grey-tint-2, #d9d9d9);
  }
  .filter-button i {
    align-items: flex-start;
    display: flex;
  }
  header {
    flex-direction: column;
  }
}
header .logo {
  padding: 1.875rem;

  justify-content: center;
}
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9375rem;
}
.buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a :hover {
  border-top: none;
  border-bottom: solid 2px #0065fc;
}
.btnact,
.btnheber {
  height: 1.1875rem;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  width: 11.71875rem;
}

.activites-card {
  display: flex;
  flex-direction: column;
}
footer {
  display: flex;
  flex-direction: column;
}

.infogroup {
  padding: 1.25rem;
}
.search-bar {
  width: 17.8rem;
}

.search-bar i {
  color: black;
}

.search-button {
  color: white;
  border-radius: 0.9375rem;
  border: 1px solid var(--Blue, #0065fc);
  background: var(--Blue, #0065fc);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.desktop-text {
  display: none;
}
.search-bar .mobile-icon i {
  display: inline;
  width: 1.0625rem;
  height: 1.0625rem;
  color: #fff;
}