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

Is the parent node of the input element the input element itself?

When working with a DOM object obj of type <input>, I encountered an issue where attempting to obtain its parent node using obj.parentNode resulted in the same obj being returned. Is this behavior specific to <input> objects? What other types o ...

javascripthtmldom

Image Handpicked by JCrop User

Successfully implemented JCrop example code for selecting an area on an image with a preview and getting coordinates. However, the challenge lies in allowing users to select an image from their file system, display it in the browser, and perform the afore ...

javascriptjqueryhtmlimagejcrop

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

htmlcss

PHP not receiving POST information from $.ajax call

My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...

javascriptphpjqueryhtmlajax

Mobile application designed using HTML which allows for storing data offline without needing an

Looking to develop a mobile application using HTML5 that can function on both iOS devices (such as iPhones and iPads) and Android phones and tablets. The focus of the app will be on organizing grocery items, including various categories and images for eac ...

htmlcordovakendo-ui

Customizing CSS based on URL or parent-child relationship in WordPress

I'm having trouble finding a solution for what seems like a simple issue... Currently, my header has a border-bottom and I'd like to change the color of this border based on the section the user is in. For example, consider these parent pages: ...

javascriptjquerycsswordpress

What steps should I take to ensure that my dropdown menu functions properly?

I am struggling to get my navigation bar with dropdown menus to function properly. I suspect there might be an issue with the CSS code. Can you take a look at it? Here is the HTML code snippet: /*---------------------NAVBAR-------------------*/ ...

htmlcss

Create an HTML selection element based on the value selected in the previous element using jQuery

I have an issue with generating a third HTML select element based on the selection of a first HTML select element and the use of an AJAX function. The process works correctly for the second select element, but when I try to generate the third select elemen ...

jqueryhtmlajax

Ways to enlarge the font size of a hyperlink

I am just starting out with coding and I need to figure out how to increase the font size of my link. <!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: #FFFFFF; } /* visited link */ a:visited { color: #FF ...

htmlcss

What are the steps to create a customized app bar with React and Material-UI similar to this design?

Can anyone help me create an app bar that resembles this design: Click here to view I have managed to implement the search box in the top half of the app bar, but I am struggling with adding the bottom half. Here is the code I have written so far: ...

htmlcssreactjsreact-nativematerial-ui

Choose class based on the retrieved information

Good morning, I am working on dynamically setting the class of a td element based on data fetched from a database to reflect any changes or updates. One of the fields returned has four possible options, and I need to modify the CSS class of that field acc ...

jquerycssajax

Using Javascript to eliminate divs on a page that have the attribute display:none

Looking for a way to remove generated divs with display: none using JavaScript? Let's find a solution. <div id="workarea"> <div id="message" class="messages" style="display: none;">Your message was saved</div> <div id="message" c ...

javascripthtmlprototype

Learning how to use Express.js to post and showcase comments in an HTML page with the help of Sqlite and Mustache templates

I am facing a persistent issue while trying to post new comments to the HTML in my forum app. Despite receiving various suggestions, I have been struggling to find a solution for quite some time now. Within the comments table, each comment includes attrib ...

javascripthtmlnode.jssqliteexpress

Exploring the latest MUI Styles in Scoping Version 5

We are currently in the process of transitioning our legacy application to React and MUI. To ensure that there is no styling conflict between the old and new parts of the application, we have implemented scoped styles by combining an id selector with a des ...

cssreactjssassmaterial-ui

Creating Interactive Graphs with HTML and JavaScript: A Guide to Dynamic Graph Drawing

I am seeking to create a dynamic graph using standard HTML, JavaScript, and jQuery (excluding HTML5). The nodes will be represented by divs with specific contents, connected by lines such as horizontal and vertical. The ability to add and remove nodes dyn ...

javascriptjqueryhtmlgraph

Solution for fixing the position of a div scrollbar under the browser scrollbar

When working on my web app, I faced an issue with a fixed div modal that takes up the entire screen. The problem is that the scrollbar for this modal is not visible, only the body scrollbar can be seen. It seems like the fixed div's scrollbar is posit ...

htmlcss

Ways to retrieve the user's IP address and provide the information in JSON format

Although I am not an expert in PHP, I specialize in developing Android apps. One of the challenges I face is extracting the user's IP address from a specific URL . This URL provides various information when accessed, but my main requirement is to retr ...

phpandroidhtmljsonparsing

Exploring the possibilities of maximizing, minimizing, resizing, and creating a responsive design in dialog boxes using jQuery UI JavaScript and

I'm trying to create a dialog with maximize, resize, and minimize buttons like those found in Windows OS. I want the dialog to be responsive and draggable as well. I've been using jQuery, jQuery UI, and extended dialog frameworks, but I haven&apo ...

javascriptjqueryhtmljquery-ui

The CSS on my website is causing issues with the recaptcha functionality

Recently, I've been working on a website that requires spam protection for the contact form. To combat this issue, I decided to integrate reCAPTCHA into the form. However, after completing the form and applying the necessary CSS styles, I noticed tha ...

htmlcssiframe

Modifying the default actions of Material UI components: A step-by-step guide

In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet: import React from 'react' import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-u ...

cssreactjsmaterial-ui