Ma largeur est supérieure à celle de mon écran, mais le corps et le HTML sont réglés sur 0 remplissage et marge et 100% largeur

Question

Après avoir supprimé bootstrap, j'ai rencontré ce problème avec la largeur de ma page étant plus grande que l'écran, et ayant une barre de défilement horizontale en conséquence. Je pensais que le réglage du corps, html à 0 padding et marge ainsi que 100% de largeur serait correct mais le problème persiste ..

SOLUTION EDIT: J'avais des images qui étaient plus larges que la vue, donc je devais régler box-sizing: border-box à contenir les images dans le parent. Puis j'ai hérité de ceci pour tous les éléments. Alors maintenant le haut de mon CSS est:

body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
} 

* { 
    box-sizing: inherit; 
} 

html:

@{ 
    ViewBag.Title = "Home Page"; 
} 
<div class="main"> 
    <div class="content"> 
     <div id="welcome" class="page"> 
      <h1>asasd</h1> 
      <p> 
       test3 
      </p> 
     </div> 
     <div id="asdasd" class="page" data-original="/Images/asdh.jpg"> 
      <h1>asdasd</h1> 
      <p> 
       test2 
      </p> 
      <div class="vfd"></div> 
      <div class="measurment"></div> 
     </div> 
     <div id="test2" class="page" data-original="/Images/test.jpg"> 
      <h1></h1> 
      <p>test 
      </p> 
     </div> 
    </div> 
</div> 

CSS:

body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

.main { 
    width: 100%; 
    height: 100%; 
} 

.content { 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    padding: 0; 
    height: 300vh; 
} 

.page { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    position: relative; 
    width: 100%; 
    text-align: center; 
    vertical-align: middle; 
    font-size: 18px; 
    padding-left: 25%; 
    padding-right: 25%; 
} 

Answer 1

-ce que vos images ce que fait votre débordement de la largeur de l'écran? Vous pouvez toujours utiliser la taille de boîte pour aider à effacer les marges et le remplissage: https://css-tricks.com/box-sizing/

Answer 2

Utilisez box-sizing: border-box; pour que votre rembourrage soit inclus dans la largeur. Sinon, votre largeur réelle est de 100% + 25% + 25% = 150%.

box-sizing CSS3 propriété

-boîte de contenu par défaut. Les propriétés width et height (et les propriétés min/max) incluent uniquement le contenu. Bordure, rembourrage, ou de la marge ne sont pas inclus

border-box Les propriétés de largeur et de hauteur (et les propriétés min/max) inclut le contenu, le remplissage et la bordure, mais pas la marge

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.main { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: stretch; 
 
    padding: 0; 
 
    height: 300vh; 
 
} 
 

 
.page { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
    position: relative; 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 18px; 
 
    padding-left: 25%; 
 
    padding-right: 25%; 
 
    box-sizing: border-box; 
 
}

<div class="main"> 
 
    <div class="content"> 
 
     <div id="welcome" class="page"> 
 
      <h1>asasd</h1> 
 
      <p> 
 
       test3 
 
      </p> 
 
     </div> 
 
     <div id="asdasd" class="page" data-original="/Images/asdh.jpg"> 
 
      <h1>asdasd</h1> 
 
      <p> 
 
       test2 
 
      </p> 
 
      <div class="vfd"></div> 
 
      <div class="measurment"></div> 
 
     </div> 
 
     <div id="test2" class="page" data-original="/Images/test.jpg"> 
 
      <h1></h1> 
 
      <p>test 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

suffit de remplacer cette partie dans votre CSS et le défilement horizontal sera disparu:

.content { 
     display:inline-block; 
     /*display: flex; 
     flex-direction: column; 
     align-items: stretch;*/ 
     padding: 0; 
     height: 300vh; 
} 

Mais je ne comprends pas vraiment ce que vous essayez d'accomplir avec ces codes CSS.