I'm sending an html formatted responsive email to my clients after they sign up from my .net MVC app. My problem is that the picture which in this case is my logo doesn't get centered no matter what css or bootstrap class I apply to it. It looks fine when rendering on a computer or even in another different mail client on ios. The problem seems to be the default mail app. Here is how it is showing. The first picture is how it appears on the mail app and the second picture is how it appears on a desktop which displays correctly. Please note that the white text is the picture. The purple background is just a div that I made purple.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Welcome To Church Musician!</title>
<style>
.header {
background-color: darkviolet;
height: 200px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container{
background-color: white !important;
}
body{
background-color: whitesmoke !important;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container" >
<div class="header">
<img class="img-fluid"src="cid:id1" />
</div>
<hr />
<p>This is a test</p>
</div>
</body>
</html>