'I have a header with a video background that looks good on a desktop but on a mobile it is pushed to the left side instead of full width

I have a header with a video background that looks good on a desktop but on a mobile it is pushed to the left side instead of full width Tried everything I can think of but still not working as I would like. It's about 2/3rds of the mobile view width starting on the left. Interestingly if i remove all the images the header then works and spreads across to fill the full width as I want. Any ideas? Here is my code: html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">   
<meta name="viewport" content="width=device-width,      initial-scale=1.0">
<link href="https://fonts.googleapis.com  /css?family=Montserrat:400,800" rel="stylesheet">
<link rel="stylesheet" type="text/css"  href="css/styletest.css">
<title>example</title>

</head>
<body style="background-color: #90ee903b;">
      
<div class="header">    
<div class="video6">
<video autoplay muted defaultMuted playsinline src="images/touchblue4.mp4"></video>
</div>
             
</div>   

<main>              
        
<div class="example_container">  
<div class="exampletext-container">
                <pre>

               couple of paragraphs
<img src="images/example.png">
              couple of paragraphs
<img src="images/example.png">
              couple of paragraphs
<img src="images/example.png">
              couple of paragraphs
<img src="images/example.png">
                </pre>
</div>
        
</div>
                  
<div class="footer"> 
                       <p>
                  A paragraph. 
                       </p>
                 
</div>                    

</main>


</body>
</html>

CSS:

.header {
   width: 100%;
   height: 200px;
   display: block;  
   overflow: hidden;
   margin-bottom: 50px;
}

/* This h1 is in case video doesn't work */
.header h1 {
   margin-top: 30px;
   color: #3F4EFF;
}
 
.example_container {
    display: flex;
    padding-left: 0px;
    padding-top: 20px;
    margin: ;
    justify-content: ; 
    width: 100%;    
    
    
}
.exampletext-container {
    display: flex;
    padding-left: 30px;
    margin: auto;
    width: 700px;
    
        
}
.exampletext-container pre {
    font-size: 20px;
    padding-top: 20px;
    color: black;
    font-family: Montserrat;
    white-space: pre-wrap;
    word-wrap: break-word;
    

}
 
 .exampletext-container img {
    
    padding-top: 20px;
    padding-left: 00px;
    padding-bottom: 30px;
    height: 250px;
    width: 600px;
    margin: auto;
} 

.footer {
    background-color: pink;
    width: 100%;
    height: 125px;
    display: block;
}
.footer p {
    font-family: Montserrat;
    font-size: 10px;
    color: white;
    text-align: center;
    padding-top: 15px;
}
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions