Why does my text keep drifting towards the left edge?

After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully.

However, upon reviewing my progress (see screenshot here), it is evident that the text does not look as desired. Here is the code I used:

.presentation {
    display: flex;
    width: 20%;
    margin: auto;
    min-height: 80vh;
    align-items: center;
}

Below is my HTML markup:

<div class="introduction">
<div class="intro-text">
htmlcss

Answer №1

Implement

text-align: center;

Incorporate this code into your intro-text CSS style

Answer №2

To implement this styling, simply insert the following code snippet into your CSS stylesheet.

 .presentation {
display: flex;
width: 20%;
margin: auto;
min-height: 80vh;
align-items: center;
text-align: center;}

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

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

javascriptphphtmlgoogle-signin

"Adjusting the height of a div element while considering the

I have 2 elements with different heights and I want to make them equal: var highestEl = $('#secondElement').height(); $('.element').first().height(highestEl); I understand that the second element is always taller than the first one. W ...

javascriptcsshtmlheight

The script file (.js) isn't showing up on the PHP or HTML webpage

Experiencing a peculiar issue and seeking advice on alternative solutions due to my limited experience in this matter. The Issue: I currently have the following script running smoothly: <script type="text/javascript" id="myscript" src="http://piclau ...

javascriptphpjqueryhtmlangularjs

Creating a personalized mouse cursor using HTML

I am trying to set an image as my cursor inside a div container but I want it to disappear and revert back to a normal pointer cursor when the mouse hovers over any link within that div. Here is my code snippet: var $box = $(".box"); var $myCursor = $ ...

javascriptjqueryhtmlcursor-position

Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

Having some trouble understanding how auto-fill and fit work in grid layouts. I am familiar with basic CSS, but new to working with grid layouts. I have a set of checkbox items with labels that I want to display in columns depending on screen size, with c ...

csscss-gridgrid-layout

Displaying a webpage within a viewport without utilizing any predefined templates

Currently seeking a solution to effectively display HTML emails within a Rails 4.2 application view without utilizing an iframe, which has proven to be unreliable. The current method of rendering is as follows: %iframe{srcdoc: "#{@email.html}" I have re ...

ruby-on-railshtmlruby-on-rails-4iframe

Golang template's nested ranges

Being fairly new to this, I could use a little assistance. I have these two structs: type School struct { ID string Name string Students []Student } type Student struct { ID string Name string } M ...

htmltemplatesgostructnested

CSS transition fails to revert

My standard opacity animation is not working in reverse order. Here is a link to the JSFiddle example. According to the documentation, it should work automatically. Since I am new to JavaScript, I am unsure if this issue lies in my code or if the CSS anima ...

javascripthtmlcss

Spacing between hidden checkboxes and their labels

I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...

htmlcsscheckboxinputmargin

Run a function upon clicking a button in JavaScript

Could someone please help me figure out what I am doing incorrectly in the code below? I am attempting to trigger a function when a button is clicked. The HTML: <button id="btn1">Press me!</button> <input type="button" id="btn2" value="Pr ...

javascripthtmlfunctionbuttonunobtrusive-javascript

Positioning an HTML control on top of a Silverlight Application, ensuring it moves in sync with the application as it scrolls

   I am facing a challenge with my Silverlight Application (VS2010/C#) that runs in full screen mode.    There is also an HTML control positioned over the Silverlight Application.    When I maximize the brows ...

c#htmlcsssilverlightlayout

Adjust the width of an HTML input using the Bootstrap 5 form-control class

Is it possible to set the width of an input using Bootstrap's form-control or input-group classes? In the example below, each input should have a width based on its maxlength attribute: <link href="https://cdn.jsdelivr.net/npm/<a href="/cd ...

htmlcssbootstrap-5

Tips for aligning three cards in a row using Bootstrap-5

In my Django template for loop, I am trying to display the first three cards from the database on the same line. Currently, only two of them are staying on the same line and I want all three cards to be aligned horizontally. <div class="row"&g ...

pythonhtmlcssdjangobootstrap-5

Steps for leveraging pdfMake with live data

Recently delving into Angular, I've been exploring the capabilities of pdfMake. While I successfully incorporated static data, I'm facing challenges when attempting to utilize dynamic data. Any guidance on how to achieve this would be greatly app ...

javascripthtmlangulartypescriptpdfmake

Is it possible to modify the inactive color of just one radio button in Framework7?

Is there a way to change the inactive color of only one radio button in Framework7? I am aware that using the CSS variable --f7-radio-inactive-color allows me to set the inactive color for all radio buttons. However, I specifically want to modify the inac ...

javascriptjqueryhtmlcsshtml-framework-7

Hide or show list items in an unordered list using jQuery

I am interested in creating a script that can toggle between "show more" and "show less" functionality for elements in a list. I came across this script: HTML <ul id="myList"> <li>One</li> <li>Two</li> <li> ...

javascriptjqueryhtmlcsslist

An issue occurred while the request was being transported or processed, resulting in Error code 10 at Path /wardeninit

Currently, I am attempting to pass an object (specifically the contents of a row from a sheet) to an apps script template. The screenshot displays the actual row. https://i.stack.imgur.com/IzMrn.png The function in my apps script consists of the followin ...

htmlgoogle-apps-scriptweb-applicationsgoogle-sheets

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

My code and tests are functioning properly, but I am facing a challenge with my react-table file. The react-table.js API specifies that in order to use their CSS file, I need to include import "react-table/react-table.css"; in my react-table.js file. Howev ...

javascriptcssreactjsjestjsreact-table

Get the image from the express route

Currently, I am running an express server with the following route: exports.getUserFile = function (req, resp) { let filePath = path.join(__dirname, 'storage', req.params.fileName); resp.download(filePath); }); } Within my web app ...

javascriptnode.jshtmlrestexpress

Is it possible to include all the information in a form submission, not just the inputs?

I have a problem with submitting the form and accessing all the variables I need. When I check the $_POST variable, I only see the values of the form inputs. Is there a way to also send other variables like the content of multiplicator1? How can I achiev ...

phphtmlformspost