Bootstrap The toggle button in the navbar shift the content to the left-CodePudding

I everyone.

I have a problem with the navbar on my website. On the mobile version, the toggle button in the navbar shift the website to the left, the content is not centered.

But, on my navigator, in responsive mode, the website is centered and the toggle button don't shift the website to the left.

My HTML code:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Valentin Fauchère Développeur Web PHP</title>
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    
    <meta name="robots" content="noimageindex">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
      <header >
        <nav >
          <div >
            <a  href="index.php">Valentin Fauchère</a>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span ></span>
            </button>
            <div  id="navbarNav">
              <ul >
                <li >
                  <a  href="#qsj">Qui-suis-je</a>
                </li>
                <li >
                  <a  href="#competences">Compétences</a>
                </li>
                <li >
                  <a  href="#real">Réalisations</a>
                </li>
                <li >
                  <a  href="#contact">Contact</a>
                </li>
              </ul>
            </div>
        </div>
    </nav>
      </header>
      <main>
        <div >
          <div >
            <h1>Valentin Fauchère</h1>
            <h2>Développeur Web PHP</h2>
          </div>
          <div >
            <div >
              <img src="vf.jpg"  alt=" " />
            </div>
          </div>
        </div>
        <div data-bs-spy="scroll" data-bs-target="#navbar-website" data-bs-offset="0" tabindex="0">
/* the rest of the main */
      </main>
      <footer>
          ...  /*the rest of the footer*/
      </footer>
     
  </body>
</html>

My CSS code:

body {
    background-color: white;
    width: 100%;
    font-size: 1rem;
    z-index: 1;
}

header {
    background-color: white;
}

.navbar-brand {
    font-size: 3rem;
    color: #303030;
    font-family: 'Oswald', sans-serif;
}

.navbar-brand:hover {
    color: #303030;
}

 .nav-link {
    color: #303030;
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    padding-bottom: 0.5rem;
}

.navbar-nav {
    margin-left: auto;
}

.nav-item {
    margin-right: 1rem;
    margin-left: 1rem;
    text-align: center;;
}

.nav-link:hover {
    color: #303030;
}

.navbar-toggler-icon {
     background-image: url("data:image/svg xml;charset=utf8,");
    width: 5rem;
    height: 5rem;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.box-present {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 15rem;
}

.box-present-title {
    background-color: #54F98D;
    width: 600px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box-present-img-dev {
    display: flex;
    background-color: #FF866A;
    width: 600px;
    height: 400px;
    align-items: center;
}

.box-title-site {
    text-align: center;
    clear: both;
    
}

.box-present-title > h1 {
    color: #303030;
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    margin-left: auto;
    margin-right: auto;
    width: 12rem;
    text-align: center;
}

.box-img-perso {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

.box-present-title > h2 {
    color: #303030;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: 12rem;
    text-align: center;
}

.box-img-perso > .img-perso {
    height: 60%;
    width: 60%;
    border: 15px solid #303030;
    border-radius: 50% 20% / 10% 40%;
}

/* the rest of the css */

Do you have a clue to fix this problem ?

A link the "test" site: https://test.valentin-fauchere.net

CodePudding user response：

I checked out your website.

You have to change a few things. The problem is caused by the width of different elements on your page which are wider than the screen width. Also, pay attention to margins and paddings.

.form-input-area {
    width: 550px; /* Problematic */
}

.form-input-line {
    width: 450px; /* Problematic */
}

.card-title.real-title a {
    /* Problematic */
}

Use @media query like this to change style for mobile:

@media only screen and (max-width: 575px) {
    .form-input-area {
        width: 100vw;
    }
    
    .form-input-line {
        width: 100vw;
    }
}

CodePudding user response：

Html code :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Valentin Fauchère Développeur Web PHP</title>
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    
    <meta name="robots" content="noimageindex">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
      <header >
        <nav >
          <div >
            <a  href="index.php">Valentin Fauchère</a>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span ></span>
            </button>
            <div  id="navbarNav">
              <ul >
                <li >
                  <a  href="#qsj">Qui-suis-je</a>
                </li>
                <li >
                  <a  href="#competences">Compétences</a>
                </li>
                <li >
                  <a  href="#real">Réalisations</a>
                </li>
                <li >
                  <a  href="#contact">Contact</a>
                </li>
              </ul>
            </div>
        </div>
    </nav>
      </header>
      <main>
        <div >
          <div >
            <h1>Valentin Fauchère</h1>
            <h2>Développeur Web PHP</h2>
          </div>
          <div >
            <div >
              <img src="vf.jpg"  alt=" " />
            </div>
          </div>
        </div>
        <div data-bs-spy="scroll" data-bs-target="#navbar-website" data-bs-offset="0" tabindex="0">
/* the rest of the main */
      </main>
      <footer>
          ...  /*the rest of the footer*/
      </footer>
     
  </body>
</html>

Css code :

body {
    background-color: white;
    width: 100%;
    font-size: 1rem;
    z-index: 1;
}

header {
    background-color: white;
}

.navbar-brand {
    font-size: 3rem;
    color: #303030;
    font-family: 'Oswald', sans-serif;
}

.navbar-brand:hover {
    color: #303030;
}

 .nav-link {
    color: #303030;
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    padding-bottom: 0.5rem;
}

.navbar-nav {
    margin-left: auto;
}

.nav-item {
    margin-right: 1rem;
    margin-left: 1rem;
    text-align: center;;
}

.nav-link:hover {
    color: #00cc99;
}

.navbar {
    background-color: white;
    height: 10rem;
}

.navbar-toggler {
    border-color: #00cc99;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg xml,");
}

@media (max-width: 767px) {
  .navbar {
    position: fixed;
    left: 0;
    right: 0;
  }
  main {
    padding-top: 60px;
  }
}