Text not aligning properly when utilizing the <p> tag

I'm struggling to align my text in a row, as shown below:

https://i.sstatic.net/SGQ8I.png

"Investup" and "Real estate" should be aligned. I need to move the "Real estate" paragraph so that it aligns with the "invest up" paragraph.

Here's my code:

<div class="col-md-4 col-sm-6 col-xs-12 text-center ">
    <div class="service-item">
        <div class="service-icon">
            <i class="fa fa-pie-chart fa-5x"></i>
        </div>

        <h3 style="font-size: 18px; font-family: 'Roboto', sans-serif;">InvestUp</h3>
        <p style="font-size: 16px;  font-family: 'Roboto', sans-serif;">Investup is the tool for the investor to track project progress in a timely manner and receive curated updates!</p>
    </div>
</div>

<div class="col-md-4 col-sm-6 col-xs-12 text-center" data-wow-delay="0.3s">
    <div class="service-item">
        <div class="service-icon">
            <i class="fa fa-line-chart fa-5x"></i>
        </div>

        <h3 style="font-size: 18px; font-family: 'Roboto', sans-serif;">CompareUp</h3>
        <p style="font-size: 16px; font-family: 'Roboto', sans-serif;">Allows investors to review projects based on key factors like investment amount, project timeline, and location.</p>
    </div>
</div>

<div class="col-md-4 col-sm-6 col-xs-12 text-center " data-wow-delay="0.6s">
    <div class="service-item">
        <div class="service-icon">
            <i class="fa fa-users fa-5x"><br></i>
        </div>

        <h3 style="font-size: 18px; font-family: 'Roboto', sans-serif;">NetworkUp</h3>
        <p style="font-size: 16px; font-family: 'Roboto', sans-serif;">Allows you to join the Estateup global community, connect, and share investment tips.</p>
    </div>
</div>

My padding-right seems to be malfunctioning. Can someone kindly point out what I am doing wrong here?

htmlcss

Answer №1

In order to provide you with the best assistance, it would be helpful if you can share the complete code with us. However, based on my understanding of your request, I have some suggestions that may be useful.

It seems like you want to shift the Real Estate section slightly to the left.

To achieve this, you have two options: you can either use the padding-left property or the margin-left property to adjust the spacing on the left side of the element. Understanding the distinction between padding and margin is crucial for this task, and you can learn more about it here.

I recommend wrapping both elements in a single DIV container and applying the margin to that container. This will ensure that the same margin is applied to both elements.

UPDATE

Since you have shared your code, here is a suggested solution:

<div class="container">
<h3 style="font-size: 18px; font-family: 'Roboto', sans-serif;">InvestUp</h3>
<p style="font-size: 16px; font-family: 'Roboto', sans-serif;">Investup is a tool designed for investors to monitor project progress and receive curated updates in a timely manner!</p>

<p style="font-size: 16px; font-family: 'Roboto', sans-serif;"><br> Real estate transactions typically involve four parties.</p>
<div class="sec-title text-center" style="padding-bottom:3px;">                        
    <div id="" class="btn-group btn-group-lg text-center" role="group">
        <button type="button" class="btn btn-primary text-center" style="width:300px;height:60px; font-weight:800; font-size:18px;font-family: 'Roboto', sans-serif;">Enter Now</button>
    </div>
  </div>
</div>

You can now apply a margin to the "container" class using CSS:

.container{
  margin-left: 20px;
}

Answer №2

I have aligned both paragraphs to the left, but if you prefer, you can also align them in the center by checking out the code below.

<h3 style="font-size: 18px; font-family: 'Roboto', sans-serif;">InvestUp</h3>
    <p style="font-size: 16px; font-family: 'Roboto', sans-serif; text-align: left; margin-right:20px; padding-right:20px;  ">Investup is a tool for investors to monitor project progress in real-time and receive curated updates!</p>

<p style="font-size: 16px; font-family: 'Roboto', sans-serif; text-align: left; margin-right:20px; padding-right:20px;  "><br> Real estate transactions always involve four parties.</p>
<div class="sec-title text-center" style="padding-bottom:3px; ">                        
    <div id="" class="btn-group btn-group-lg text-center" role="group">
        <button type="button" class="btn btn-primary text-center" style="width:300px;height:60px; font-weight:800; font-size:18px;font-family: 'Roboto', sans-serif;  
" style="">Enter Now</button>
    </div>
</div>

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

Drawer component from Material-UI placed on top of the sidebar

Currently, I am working on a project where I am using React TypeScript along with Material-UI. The issue that I am encountering is related to the width of the Drawer component provided by Material-UI. By default, the Drawer takes up the entire screen wid ...

cssreactjsmaterial-ui

Implementing a SetTimeout Function in HTML

Is there a way to delay calling the mouseHoverTableRow() function until after hovering on tr for 3 seconds? I only want to call this function if the hover duration is at least 3 seconds, as it triggers an API request. How can I achieve this? <tr *ngF ...

htmlangular

What is the best way to show the current value of a checkbox element in the future?

I want to add multiple checkboxes using this method: $(".btn-sample").on("click", function() { $(".container").append( '<input class="check-sample" type="checkbox" value="'+check_value+'"/>' ); }); The issue I' ...

javascriptjqueryhtmldomcheckbox

Using CSS to create a triangular background within a <div> element

I am looking to create a CSS triangle shape for a background, but I am unsure of how to achieve this or if it is even possible. Ultimately, I want the menu to resemble the image linked below: While I have come across methods to create the desired shape, ...

htmlcss

Trick for hiding CSS elements when input field is vacant

Is there a way to hide the search result when the input is empty? While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then d ...

htmlcss

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

javascripthtmlcss

In Internet Explorer 9, the cursor unexpectedly moves up above the element

Within my MVC3 application, I have implemented a feature to change the cursor when hovering over an element. Below is the JavaScript code that accomplishes this: $('#print').hover(function () { var cursorUrl = 'url(@Url.Content("~/Cont ...

javascripthtmlasp.net-mvc-3internet-explorergoogle-chrome

Conceal overflow in SVG after stroke is applied to top rectangle border

Is there a way to conceal the overflowing red color in this SVG? I attempted repositioning it before the rect with the stroke, but that didn't solve the issue. Check out the code and screenshot below. <br><br> <svg _ngcontent-fdl-c1 ...

javascripthtmlsvg

Adjust the hyperlink color of <a> to change when hovering over <tr>

When I hover over a <tr> tag, I want the color of the associated <a> element to change to white. I attempted to achieve this using jQuery in the following way: <script> $('tr').hover(function(){ $('a').cs ...

jqueryhtmlcss

The Send.php script is missing the input fields for Name and Email

Running my own website at CrystalVision.com, I have some challenges with my PHP skills. The issue lies within my send.php file. Although the email functionality works fine and I receive messages, the Name and Email fields filled in by users are not display ...

phphtmlemailhtml-emailcontacts

Mysterious extra space appearing on the right side of the left scroll div in Chrome

I am currently working with a table that dynamically increases in content when a button is clicked. I have successfully implemented a scroll on the right side to handle overflow. However, I encountered an issue when trying to change the scroll to the left ...

htmlcss

Adjust the height of a div using jQuery animate based on the amount of text within

I have created a basic animation feature where users can click on an expanding box. I am looking for a solution that does not involve using a plugin. Currently, the code looks like this: $('#one').css("height", "22"); $('#t1').cli ...

javascriptjqueryhtmlcss

Creating a unique checkbox design using pure CSS and HTML

I'm looking to design a customized checkbox using just HTML and CSS. Here's what I have so far: HTML/CSS: .checkbox-custom { opacity: 0; position: absolute; } .checkbox-custom, .checkbox-custom-label { display: inline-block; vertica ...

htmlcsscheckboxinputpseudo-element

What is the best way to position an image next to an input element?

How can I position submit.png next to the input element in my code? <div class="input-box" style="height: 40px; width: 500px;"> <img src="img/delete.png" width="25px" height="25px;" style="position: absolute; right: 0;"> ...

htmlcss

The grid layout is being disrupted by a concealed input

As I work on styling my admin panels with Twitter Bootstrap, I've encountered a strange issue. Upon testing in Chrome 28 and Firefox, adding a simple hidden input seems to disrupt the grid layout. If the hidden input is moved into div.span6 or remove ...

htmlcsstwitter-bootstrapgrid

How to position the navigation bar to the right using bootstrap

I have been experimenting with moving the navigation bar to the right side of the screen in bootstrap4 by using float: right; on the nav a element, but it doesn't seem to be having any effect. I am developing my project using a codepen app. Here is t ...

htmlcsstwitter-bootstrapweb

What is the proper file format for a form action in CSS?

What I Currently Have: In my Index.html file, there are a total of 4 form elements including text fields and a dropdown. Upon submission by the user, the data is processed in confirm.html using a separate JavaScript file for formatting before being displa ...

javascripthtmlcss

The current context does not have a reference to TextBox

I am encountering an issue with my simple aspx page. Despite not using Master Content Page, I am seeing the following error: The name 'txtFirstName' does not exist in the current context Here is my Markup: <%@ Page Language="C#" %> &l ...

javascripthtmlasp.net

Troubleshoot: Difficulty selecting elements in OnsenUI with jQuery or JavaScript - potential ons-template problem?

Just starting out with OnsenUI and I'm really liking the overall look and feel of it so far. Working with plain JS and a bit of jQuery. The problem I'm facing is that I can't seem to select anything (ID, Class etc.) using JS or jQuery while ...

jqueryhtmlcordovaonsen-uionsen-ui2

What is the best way to update the innerHTML of a date input to reflect the current value entered by the user?

Currently, my task involves extracting data from a table by obtaining the innerHTML of each row. The table contains date inputs that can be manually adjusted or generated automatically. However, the innerHTML does not update accordingly. Thus, when exporti ...

javascripthtmljquery