I am facing an issue with centering text within a banner. The banner is divided into 12 columns, with a cross icon placed in the left-most column for closing the window. However, the text is not centering within the whole banner width but only within the space between the cross icon and the end of the banner. I have checked the HTML and CSS code multiple times, but I cannot seem to find the issue. Here is the HTML:
<div class='col-xs-12 banner'>
<a class="navbar-brand cross-link" href="" ng-click="close()">
<img class="cross" src="/components/cross.png" alt="close">
</a>
<h1>{{title}}</h1>
</div>
and the corresponding CSS:
.banner {
height: 70px;
background-color: red;
h1 {
color: white;
text-align: center;
}
.navbar-brand {
&.cross-link {
padding: 0px;
img.cross {
margin: auto;
width: 70px;
height: 70px;
padding: 29px 28px 27px 28px;
}
}
}
Upon inspecting this in Chrome, I noticed that the h1 is centered correctly in a full-width container, but the image is causing it to shift. Can anyone provide insight on how to fix this issue?
Thank you