HTML heading alignment issues

user_6527939 0
Viewed 52

Hi I have 2 simple headings, an h3 on top of an h2. For some strange reason though there seems to be a 1px gap on the left of the h2 heading. It's driving me mad and I just don't get why it is. The font size of the h2 is 40px where as the font size of the h3 is 12px.

Can someone put me out of my misery with this

Thank you

body {
  padding: 0;
  margin:0;
}
.section-heading-small {
  font-size: 12px;
  letter-spacing: 5px;
  color: #a3a3a3;
  font-weight: 500;
  margin: 0;
}

.section-heading-main {
  font-family: sans-serif;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0;
  text-transform: uppercase;
font-weight: 700;

}
       <h3 class="section-heading-small">Small Heading</h3>
              <h2 class="section-heading-main">Large Heading</h2>

css html
2 Answers

This is not a problem. The font is designed with a vector spacing But you can display it with the margin-left:-3px; or text-indent:-2px; as desired

body {
  padding: 0;
  margin:0;
}
.section-heading-small {
  font-size: 12px;
  letter-spacing: 5px;
  color: #a3a3a3;
  font-weight: 500;
  margin: 0;
}
.section-heading-main {
  font-family: sans-serif;
  font-size: 40px;
  letter-spacing: -1px;
  margin: 0 0 0 -3px;
  text-transform: uppercase;
  font-weight: 700;
}
<h3 class="section-heading-small">Small Heading</h3>
<h2 class="section-heading-main">Large Heading</h2>

user_48261380

It might be the font weight and size is too big try and reduce the font weight and size

Font-size: 20px; 
Font-weight: 500;
user_83160640
Related