Issue with HTML CSS: There is a gap between the words "Get" and "started", causing "get" to appear on

Greetings, it appears I am encountering an issue with my website. When I refer to "Get Started," it displays as "GetStarted." However, when I insert a space between "Get" and "started," it separates onto two lines as "Get" on the first line and "started" on the second.

I have attempted to rectify this by utilizing display: inline-block in my CSS code and decreasing the font size.

Below is the CSS code snippet:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face{
    src: url(/fonts/Coiny-Regular.ttf);
    font-family: Coiny;
}

body, html{
    background-image: url(/img/BackGround.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.name{
    text-decoration: none;
    font-family: Coiny;
    font-size: 60px;
    ...

And here is the HTML code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pacific</title>
</head>
<body>
    <nav>
        <h1>
            <ul>
                <li class="name2"><strong>Pacific</strong></li>
                <li><a href="/index.html"> <strong>Home</strong> </a></li>
                ...

Answer №1

Have you experimented with adjusting the padding-left in the .centre class

.centre{
  position: absolute;
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  padding-left: 758px;
}

You might also consider setting the flex-wrap to nowrap.

.centre{
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  padding-left: 760px;
}

Another adjustment to make is the width of the .centre class

.centre{
  position: absolute;
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  padding-left: 760px;
  width: <insert px or rem amount here>
}

Lastly, it's recommended to use a browser (such as Firefox and/or Chrome) that allows you to inspect and manipulate the DOM. This way, you can try out various solutions quickly and find the one that suits your needs. Best of luck with your coding endeavors!

Answer №2

If you need a quick solution, try this:

<strong>Get&nbsp;Started</strong>

However, make sure to implement proper CSS in the future.

You can achieve the same result by using either white-space: pre; as suggested by @CBroe, or white-space: nowrap; in your CSS.

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

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

I already know how to do this once. However, I would like the animation to restart or begin again when the user clicks on it a second time. Here is what I have: function animation() { document.getElementById('ExampleButton').className = &apo ...

Exploring the utilization of CSS host selectors with Angular4 to target direct child elements

Within my app.component.css file, I currently have the following code snippet: * ~ * { margin-top: 24px; } This rule actually adds some top margin to all elements that come after the first one. However, this is not exactly what I intend to achieve. My ...

Creating new accounts with SQL in HTML code

I am working on a query to input any information entered into a form into the database. I have written some code, but I believe there is an issue with the query itself as I am unsure how to include variables in a SQL query. If anyone could assist me with t ...

Nested Tables in JavaScript: Creating Tables within Tables

Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...

A simple demo showcasing interactive HTML pages using Django and AJAX

In my search for answers, I came across the following helpful posts: How to Reload table data in Django without refreshing the page Tutorial on Django dynamic HTML table refresh with AJAX Despite the insights from these posts, I am still facing chal ...

Navigate through previous and next siblings in jQuery until a difference is found

Here's the issue: I have a div with multiple siblings positioned before and after it. For example: <div id="parent"> <div class="invalid"></div><!-- break iteration here !--> <div class="operand"></div> <div cl ...

The problem with clearing floats in IE7 (as well as 6)

Currently, I am facing an issue where I have a list that I want to split into three columns by using the float left property and then clearing the first column. Everything seems to be working fine in IE8 and FF, however, IE7 is causing the second column t ...

In the event that the final calculated total is a negative number, reset it to zero. Inform the user of an error through the use of a prompt dialog box

I'm having trouble getting the grand total to display as 0 when I enter all amounts in positive values and then change the unit prices to negative values. However, it works fine when I only enter negative values throughout. Can someone please help me ...

Tips for accessing a DOM element's ::before content using JavaScript

Is there a way to retrieve the content of a DOM element's ::before pseudo-element that was applied using CSS3? I've attempted several methods without success, and I'm feeling very confused! // https://rollbar.com/docs/ const links = docum ...

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...

Creating a non-editable form or text field upon clicking the Submit button

<form [formGroup]="calculateForm"> <div class="form-group row"> <p for="inputFrom" class="col-sm-4">Distance traveled ...

Border becomes dashed when dragging and dropping

I am working on enabling drag and drop functionality for users. When an item is lifted from its original position, a gray dashed box should appear in its place. As the item is moved closer to another spot, the containers adjust to create a target area (gra ...

Space between elements in a horizontal arrangement

While working with Bootstrap 5 and using paddings in columns, I encountered issues when some of my columns had backgrounds or when adding an embed element. How can I create margins in such cases? To address this issue, I implemented a workaround by assign ...

Creating a dynamic dropdown menu that changes based on the selection from another dropdown menu

I'm working on a project that requires users to make specific selections in dropdown menus that are interconnected. Does anyone know how to set up a form so that the options in dropdown menu #2 change based on what the user selects in dropdown menu #1 ...

Issues with Hovering over Button Contained in Slider

I can't seem to figure this out. It should be a simple fix. I have 5 slider images with black buttons that link to different galleries. I want the button background color to change on hover, but it's only working on one of the sliders. It seems ...

I would like to apply my CSS styles to all the hyperlinks on my website

This is the CSS code I created: img{width:85%; height:auto;} #thumbwrap { position:relative; } .thumb img { border:1px solid #000; margin:3px; float:left; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover, .thu ...

Attempting to incorporate Font-Awesome Icons into the navigation bar tabs

As a newcomer to React, I've been attempting to incorporate Font Awesome icons into my secondary navigation bar. Despite using switch-case statements to iterate through each element, all the icons ended up looking the same, indicating that only the de ...

"Header background image gradually fades out and disappears as you scroll, revealing a bottom gradient effect in a React application

When I scroll, my header image fades away. I used JavaScript in my React app to achieve this effect: useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ ...

Update the src attribute in an HTML document

I am looking to dynamically change the size of an image on an HTML page using a dropdown list. Here is my code: <html> <head> </head> <body> <select id="selectbox" name=""> <opti ...

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...