I am having an issue with a header that has a video background. It looks great on desktop, but on mobile devices, it is only taking up about 2/3 of the screen width and is aligned to the left side instead of filling the entire width.
I have tried several solutions but nothing seems to work as intended. Interestingly, when I remove all the images from the header, it then fills the full width correctly.
Does anyone have any suggestions or ideas on how to fix this?
Below is the code snippet for reference:
.header {
width: 100%;
height: 200px;
display: block;
overflow: hidden;
margin-bottom: 50px;
}
.header h1 {
margin-top: 30px;
color: #3F4EFF;
}
.example_container {
display: flex;
padding-left: 0px;
padding-top: 20px;
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;
}<!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>