My header is behaving unexpectedly when I break a sentence into separate elements.
I have attempted all the suggested solutions here: How do I remove the space between inline-block elements?. I even tried applying font-size: 0 to the parent element. The elements have display: inline-block; and I have removed (or commented out) the whitespace between them.
Check out my Fiddle here: https://jsfiddle.net/ax162cjq/1/.
Unfortunately, it's still not working as intended. The text wraps differently at different window sizes but specifically at 295px, the word "you" breaks onto a third line when separated. I need these words to be separate for future JS manipulation, so combining them back into one HTML element is not an option.
Below is my code:
<body>
<div class="container"><h1 class="header">Find the </h1><!--
--><h1 class="header">information </h1><!--
--><h1 class="header">you need, instantly.</h1></div>
<div class="container">
<h1 class="header">Find the information you need, instantly.</h1>
</div>
</body>
And the corresponding CSS:
.container {
padding-top: 125px;
font-size: 0;
padding: 0 20px;
}
.header {
margin: 0;
display: inline-block;
font-size: 32px;
line-height: 46px;
}