logo coming out of the background color and the text color is always black in MS outlook
I am trying to show a logo and a text side by side in an outlook page. I have a picture and logo on an HTML page. When I send the content of the HTML page to the MS outlook, the page looks different. I am not using any flexbox in my HTML code, but outlook translates it differently. I am not sure what stylesheet, I can change to make the logo and text same as HTML. Below is the HTML page:
and below is what the logo and text looks like in the outlook:
The picture protrudes outside the blue background color and the second text: "This is text2" is black color. Although, I specified in my code that second text is white color. How can I fix this issue. below is my style sheet and HTML code:
<style>
.logo {
transform: translateX(2em);
}
.name1 {
font-size: 25px;
color: #e9c46a;
}
.name2 {
font-size: 25px;
color: #ffffff;
}
.container {
padding-bottom: 40px;
}
.container img {
width: 50px;
height: 50px;
}
.small-image img {
width: auto;
height: 40px;
}
.collapse-border table {
border-collapse: collapse;
border-spacing: 0;
}
.font-aligned .name1 {
vertical-align: bottom;
}
.font-aligned .name2 {
vertical-align: top;
}
</style>
HTML Code: