I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using:
<div>
<div expand="lg" className="login-header">
<h1>logo</h1>
<h1>Welcome to Wealth Analytica</h1>
<h1>Back to site</h1>
</div>
/******HERE IS SOME OTHER CODE THAT IS NOT RELATED*******/
</div>
Here is my CSS:
.login-header {
padding-top: 20px;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
text-align: center;
background-color: #343a40;
width:100%;
}
The mobile view does not appear as expected:
https://i.stack.imgur.com/6QFUv.png
The regular view looks fine. My meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Can anyone offer some advice on how to solve this issue? I have tried a few different solutions but so far, nothing has worked.