Problema striscia bianca

#Fede5

Nuovo Utente
23 Ott 2019
11
0
1
Ciao ragazzi, ho il seguente problema:

ho creato una pagina html e il relativo css ma pur avendo settato tutti i margini e i padding a 0 si aggiunge automaticamente una striscia bianca in fondo ma non capisco il perché...ho rimosso anche il link che fa riferimento a bootstrap e seppur minima c'è sempre.
Qualcuno sa aiutarmi?

Grazie

HTML
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

<link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<link rel="stylesheet" href="css/save.css">
  

</head>

<body>
 
  
      <!--Homepage -->
     <div class="testo">
     <div class="save">   
     <p>Save</p>
     </div>
     <div class="the">     
     <p>THE</p>
    </div>     
     <div class="date">     
     <p>date</p>   
     </div>
      <div class="normale">         
     <p id="nomi" style="word-spacing:20px;">...</p> 
     <p style="word-spacing:20px;">.....</p>
     <p>Trapani, Sicilia</p>     
     <p style="margin-top:10px;border-top:2px solid;">....</p>     
         </div>     
    
        
  
        
 
     <button class="open-button" onclick="openForm()">Informazioni utili</button>
        
     <div class="form-popup" id="myForm">
       <div class="form-container">
       <button type="button" class="close" onclick="closeForm()">&times;</button>
      <h1>Informazioni utili
           </h1>
           <p>Tutte le informazioni che ti possono servire<br> <a href="infoutili.html" target="_blank">Leggi qui</a> o chiudi semplicemente.</p>
     </div>
     </div>
        
        
    </div>
    

<script>
function openForm() {
  document.getElementById("myForm").style.display = "block";
}


    
   function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
</script>     
        

    
        

    
      <!--Homepage-->
</body>         
    
</html>


CSS

CSS:
@charset "UTF-8";

/* ----------------------

    0.  Reset & Clearfix
    1.  Generali
    2.  Home Page
    3.  Info utili
    4.  Media query
    
    
*/


/* ---------------------- */
/*  0. Reset & Clearfix
/* ---------------------- */


    html,body,header{
        background:trasparent;
        border:0;
        outline:0;
        padding:0;
        margin:0;
    }
    
    .clearfix:after {
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
    }
    
    li {
        list-style:none;
    }
    
/* ---------------------- */
/*  1. General
/* ---------------------- */


@font-face {
    font-family: 'Lihataja';
    src: url('../font/Lihataja.eot');
    src:  url('../font/Lihataja.eot?#iefix') format('embedded-opentype'),
      
        url('../font/Lihataja.woff') format('woff'),
        
        url("../font/Lihataja.woff2") format("woff2"),
      
        url('../font/Lihataja.ttf') format('truetype'),
    
        url('../font/Lihataja.svg#Lihataja-Brush_1') format('svg');
    
    font-weight: normal;
    
    font-style: normal;
}


@font-face {
  font-family: "BernardoModa";
  src: url("../font/BernardoModa.eot"); /* IE9 Compat Modes */
  src: url("../font/BernardoModa.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/BernardoModa.otf") format("opentype"), /* Open Type Font */
    url("../font/BernardoModa.svg") format("svg"), /* Legacy iOS */
    url("../font/BernardoModa.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../font/BernardoModa.woff") format("woff"), /* Modern Browsers */
    url("../font/BernardoModa.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
 
    
        
    body {
    overflow-x:hidden;
    }
    
    
    
    
    h1 {
    font-size: 40px;
    font-weight:bold;
    line-height:55px; 
    margin-top:30px;
    font-family: 'Cormorant Garamond', serif;   
    }
 
    
    p {
    
    line-height:18px;
    font-size:20px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: lighter;
    }
    
    


    
/* ---------------------- */
/*  2. Home Page
/* ---------------------- */


    .testo{
    width: 100%;
    height:100%;
    background-color: rgb(241,233,230);
    margin: 0;
    padding: 0;
    color:#254117;
    }

  
   .save p{
    margin: 0;
    width: 400px;
    margin-left: calc((100% / 2) - 200px);   
    font-family: 'Lihataja';
    font-size:150px;
    text-align: center;
    padding-top:100px;   
  
    }

.the p{
    width:380px;
    text-align: center;
    font-family:"BernardoModa" ;
    font-size:30px;
    margin-left: calc((100% / 2) - 150px);
    margin-top:50px;
    padding-top:50px;
    font-size:50px;   
}


    .date p{
     margin: 0;
    font-family: "Lihataja";
    font-size:150px;
    text-align: center;
    padding-top:80px;   
    }

 
   .normale p{
    width:450px;
    text-align: center;
    font-family:"BernardoModa" ;
    font-size:30px;
    margin:0;
    margin-left: calc((100% / 2) - 225px);
    line-height:1.8;
    
    }

    
/* ---------------------- */
/*  3. Info utili         */
/* ---------------------- */
 


  .open-button{
  background-color: #254117;
  color: rgb(241,233,230);
  padding: 16px 20px;
  border: none;
  border-style: outset;
  border-radius: 12px;     
  cursor: pointer;
  position: fixed;
  bottom: 50px;
  right: 35px;     
  width: 280px;
  z-index: 1;
  font-family:"BernardoModa" ;
  font-size:20px;     
   }

  

  .form-popup{
  display: none;
  position: fixed;
  bottom: 50px;
  right: 25px;     
  z-index:2;     
    }
    

  .form-container{
  max-width: 300px; 
  height: 150px; 
  padding: 10px;
  background-color:rgb(241,233,230);
  box-shadow: -10px -10px 5px;
 
  }

  .close{
  color:#254117;
  font-size: 16px;     
  background-color: transparent;
  border: none;
  float:right;
  margin: 0;
  padding: 0;     
  opacity:1;   
  }
 


  .form-container h1{
   max-width: 250px;     
   font-size:30px;
   margin: 0;
   margin-left: 25px     
 
   }
 
   .form-container p{
   max-width: 250px;     
   font-size:18px;
   margin: 0;
   margin-left: 25px     
 
   }

 
    .form-container p a:link{
    text-decoration: underline;
    color:#254117;
    }

    .form-container p a:visited{
    text-decoration: underline;
    color:#254117;
     }
 

Allegati