Difficulty aligning headings in HTML

I'm puzzled by a strange 1px gap on the left of my h2 heading, which sits atop an h3. The font sizes are set to 40px for h2 and 12px for h3. Can anyone help me solve this mystery?

Any assistance would be greatly appreciated!

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>

htmlcss

Answer №1

No need to worry about the font spacing as it is already designed with vector spacing. However, if you want to adjust the display, you can use margin-left:-3px; or text-indent:-2px;.

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>

Answer №2

The issue could be that the font weight and size are too large. Consider decreasing both the font weight and size.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS files are failing to load in ASP .NET framework

I am facing a similar issue to the one described by another user on Stack Overflow here: Asp.NET not applying my CSS files However, after adding the following code to my web.config file, nothing seems to change: <location path="css"> &l ...

cssasp.net

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

javascriptphpjqueryhtmlcss

Troubleshoot: Problem with iPhone Orientation on Bootstrap Framework

While working on a responsive website design, I encountered an issue that needs addressing. Initially, switching from portrait mode to landscape didn't trigger the expected responsive behavior; instead, it simply zoomed into the site. To prevent this ...

htmlcsstwitter-bootstrap

Is it possible for an HTML number input's arrows to change in increments that are different from its designated step attribute?

Within my design, I have implemented an <input type="number" step="1"> element for selecting font size. However, in the context of working on a large canvas, adjusting the number by 1 is hardly noticeable. It would greatly enhance ...

javascripthtmlinputuser-experience

What is the best way to style the current element being targeted in React?

In my React application, I am trying to dynamically adjust the height of a textarea element based on its content. I want to achieve this by utilizing an 'onchange' listener to trigger a resize function. While I have successfully implemented the ...

javascriptcssreactjsajax

Achieving effective targeting of the second segment within a string enclosed in a span tag through increased specificity

When it comes to styling elements, the easiest way is to use classes and assign the properties needed. However, 1. I'm not a huge fan of creating classes all over the place. That's what specificity and CSS mapping are for. 2. Going thro ...

htmlcsscss-selectorscss-specificity

Surrounding a parent div with an additional div element

I'm struggling to summarize my predicament, but let me share some simplified code that highlights the issue (index.html): <html> <body> <div id="wrapper" class="divide"> <div id="top" class="divide"> ...

htmlcss

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...

phpjavascripthtml

What is the Best Way to Create a Smooth Border-Bottom Transition?

I'm currently diving into the world of HTML5 and CSS. I want to replicate the layout from . Specifically, I am interested in adding a transition effect to the border bottom of certain elements such as "View Our Listings", "The Agency Daily", "Meet our ...

htmlcss

Utilize @Html.TextBox helper to include extra GET parameters

I have a webpage that includes a text input field, table, and pager. The text input is used to determine the number of rows displayed in the table per page. Here is the code for the view: @using (Html.BeginForm("Index", "Read", FormMethod.Get)) { ...

c#htmlasp.net-mvcasp.net-mvc-4razor

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

htmlangulartypescripttabsangular-material

I'm curious if there is a method in c3 js that allows for displaying additional x-axis values when zooming in

Is it possible to dynamically increase the x-axis culling values with the c3.js data visualization tool when zooming in? This functionality is provided by d3.js. How can we implement this feature using c3.js? ...

javascripthtmld3.jsdata-visualizationc3.js

Ways to display a Tooltip automatically without needing to hover using only CSS

I have a tooltip that is set to appear when we hover over the div element, Is there a way to display the tooltip automatically when the page is refreshed without using Javascript? I am looking for a solution in pure CSS only. I attempted to remove displa ...

javascripthtmlcsstooltip

IE11 experiencing issues with font loading

I need help troubleshooting why the fonts are not loading properly in the body section of my articles, specifically when viewed in Internet Explorer. Take a look at an example article here: I am fetching from this CSS file: , and I have included the nece ...

htmlcssfontscross-browserinternet-explorer-11

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

The CSS Bootstrap 4 class 'input-group-append' is not functioning properly. Just recently, the styles were displaying correctly

My web application using AngularJS 1.7.8, jQuery 3.3.1, Bootstrap 4.3.1, and various other CSS and JS libraries worked seamlessly last week. However, today I noticed an issue with the button visualization. To Replicate: Visit openskymap.org to see my d ...

javascriptcssangularjsbuttonbootstrap-4

Incorporating Computer Modern Serif into Your Jekyll GitHub Page

I have customized a version of the Jekyll GitHub page from here and am trying to incorporate Computer Modern Serif font as the main body font across all pages. Following instructions from an informative answer, I have downloaded the necessary files from th ...

htmlcssjekyllgithub-pageswebfonts

Unable to reach the top of an absolute or centered div when it exceeds the height of the viewport

I have successfully created a centered div with position: absolute/top: 50%/left: 50%/transform: translate(-50%, -50%) css properties on my website. However, I am facing an issue where the height of the div exceeds the viewport height and scrolling to the ...

htmlcss

Tips for restricting navbar-fixed to the width of the container

Welcome to my first project utilizing Twitter Bootstrap. While using Twitter Bootstrap, I've noticed that whether I use container-fluid or just container for my fixed top navbar, it expands to full width of the browser once it reaches around 980px. T ...

htmlcsstwitter-bootstrap