CODEWITHSUNDEEP
htmlcss
rufus
rufus

Reputation: 857

HTML heading alignment issues

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>

Upvotes: 2

Views: 69

Answers (2)

Olafusi Emmanuel
Olafusi Emmanuel

Reputation: 40

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;

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

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>

Upvotes: 3

Related Questions