The positioning of the text appears to be in the center, but it is actually

Currently, my text "lorum ipsum" is centered in CSS, but I want to align it to the left and add padding on the right later. Can someone explain what I've created here?

    #ubba {

      font-family: "Open Sans", sans-serif;

      font-size: 20px;

      font-weight: bold;

      text-align: center;

      padding-left: auto;

      margin-top: auto;

    }

    #besch {

      font-family: "Open Sans", sans-serif;

      font-size: 20px;

      text-align: left;

      padding-right: 0%;

      padding-left: 0%;

      margin-right: 0%;

      margin-left: 0%;

    }

    * {

      box-sizing: border-box;

      margin: 0px;

      height: auto;

      width: auto;

    }

    body {

      font-family: "Open Sans";

      line-height: 1.618em;

      background: #ecf0f1;

      color: #444;

    }

    .wrapper {

      max-width: 500px;

      width: 100%;

      margin: 0 auto;

    }
<div class="wrapper">
  <div id="ubba">
    <p>Heading:</p>
  </div>
  <div id="besch">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>

htmlcss

Answer №1

Your issue lies within the structure of your HTML elements. The paragraph is currently nested inside a div with specific styling:

.container{
   max-width: 600px;
   width: 100%;
   margin: 0 auto;
}

This setup causes any child div to inherit a width of 600px and be horizontally centered on the screen. To correct this, you need to separate the description div from the container:

<div class="container">
    <!--Other content within the container-->
</div>
<div id="description"><!--Moved this div out of the container-->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

Answer №2

Your central focus is on the wrapper:

.container {
  max-width: 700px; <---
  width: 100%;
  margin: 0 auto; <---
}

Answer №3

If I comprehend your goal correctly, the lorem text paragraph appears centered due to being within a wrapper container.

To achieve this effect, try closing the wrapper </div> tag before the div containing the text.

<div id="wrapper">
     <!-- all other content here -->
</div>

<div id="besch">
  <p>

     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
     sanctus est Lorem ipsum dolor sit amet.

  </p>

</div>

You can view the updated code in this fiddle: http://jsfiddle.net/w5qoh0v6/

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

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

Is it possible for URLs in CSS Custom Properties to be relative to the CSS file where they are defined?

I have a CSS library with resources like images and fonts that can be accessed from anywhere via CDN. I am trying to create URLs for these resources as Custom CSS Properties, relative to the library. <!-- https://my.server/index.html --> <link rel ...

htmlcss

Accessing a hyperlink within the existing page

How can I make a hyperlink in an HTML document that opens the linked document (link1.html) under the link on the same page? links.html: <body> <h3>Links</h3< <a href="link1.html">link1</a> </body> Desired out ...

html

Manipulate your table data with jQuery: add, update, delete, and display information with ease

When adding data dynamically to the table and attempting to edit, the checkbox value is not updating. This issue needs to be resolved. You can view the code in action on jsFiddle here on JSFiddle ...

javascriptjqueryhtml

The div has extra white space at the bottom due to the Hide/Show content feature

Having trouble stretching a scrolling div to 100% of its parent container's height? The Hide/Show content feature is causing whitespace at the bottom of the div. Check out the jsfiddle here: http://jsfiddle.net/fkvftff2/1/ LATEST UPDATE: The issue a ...

javascripthtmlcss

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

javascriptcssanimation

JavaScript is proving to be uncooperative in allowing me to modify the

Despite searching through previously asked questions, I have been unable to find a solution to my issue. I am struggling with changing an image source upon clicking the image itself. The following is a snippet of my HTML code: <img id="picture1" oncli ...

javascripthtml

Using Reactjs: How do you insert HTML code into the primaryText of a list item?

Is it possible to include a span element inside a ListItem like so: <ListItem primaryText={"<span class='inner'>Some important info</span>" + item.title} /> When I view the rendered content, the output is not an HTML span ...

htmlreactjsmaterial-uilistitem

Activate CSS transition only when not in active state

I have a situation where I want to change the background color immediately upon hovering over an element, and then revert back to the original color when no longer hovering. The CSS for this is straightforward: #el { background-color: black; } #el:hov ...

csscss-transitions

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

javascriptjqueryhtmlbootstrap-4bootstrap-tags-input

Utilizing a Single Background Image Across Several Div Elements

Let me illustrate my question using a sequence of images. The div container is set to display the background image as follows: In addition, there will be tile-shaped divs layered on top of the image: I aim to have the background image visible only withi ...

javascripthtmlcss

Issues with keyboard accessibility in drop down menus

Looking to improve the keyboard accessibility of my menu bar. Swapped out all instances of :hover with :focus, but unfortunately dropdown menus are still not accessible via keyboard. Does anyone have a solution for this issue? Appreciate any help! ...

htmlcssaccessibility

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

I need to create a form where users can select their branch of study. Here is the form I have designed- <form method="post" [formGroup]="formData" (click)="dataSubmit()" > <div class="form-group"> <label for="branch">Selec ...

htmlangular

Arranging List Items within a Container

What's the best way to align three different elements within a div? The elements are structured in an unordered list: Left, Center, and Right. I attempted to float the right element using float: right, and applied margin: 0 auto with a set width for ...

htmlcssweb

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

I am struggling to create a form with 3 input fields and a button on the same row using Bootstrap v4 for the design. Can anyone help me figure this out? Take a look at my current design: Click here My Code <div class="col-sm-7 mx-auto bg-faded"&g ...

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Generate a custom website using React to display multiple copies of a single item dynamically

As a newcomer to React and web development, I've been pondering the possibility of creating dynamic webpages. Let's say I have a .json file containing information about various soccer leagues, structured like this: "api": { "results": 1376, ...

javascripthtmlreactjsurldynamic

Setting the title attribute for option elements in a select element that is bound to a model using AngularJs

I'm currently working on an HTML select element that is connected to an ng-model. Here's what the setup looks like: <select data-ng-model="accountType" data-ng-options="at.name for at in accountTypes"></select> This is how my accou ...

javascripthtmlangularjsangularjs-directive

Make an element in jQuery draggable but always within the viewport

My issue is that when I resize the window, the element stays in its position until I start dragging it. Once I drag it and then resize the window again, it doesn't stay within its container. To better illustrate my problem, you can view a demo on Fid ...

javascriptjqueryhtmlcssjquery-ui

Applying custom CSS designs to images using Thymeleaf

Currently working on a web application using Spring MVC and Thymeleaf for templating. I'm struggling to figure out how to apply rules to an image, especially when using an external CSS file. I have tested code that works: page.html <a class="nav ...

htmlcsstwitter-bootstrapspring-mvcthymeleaf

What causes the translation of text within HTML tags to occur when attempting to retrieve it during Web Scraping?

Exploring the world of web scraping, I am currently immersed in a small project. In this snippet of code, I am capturing the HTML content and storing it in a variable named soup. source=requests.get(URL) soup=BeautifulSoup(source.text,'html.parser&apo ...

pythonhtmlweb-scrapingbeautifulsouppython-requests-html