Centering content and left aligning it

HTML-CSS
1

I am having the worst time.

I created 2 sections for a form and unorded list, when I center them they become centered but no longer aligned left.

Here is my codepen if anyone can help

(I don’t know why this ended up in the Python forum I marked it html-css :confused:

2 Likes
2

Hi
am not exactly sure what you are tyring to achieve

3

Here it is after I tried to format the content.

1 Like
4
you dont have a closing tag for this one ,your mising
in the end
1 Like
5 
<div class="container">
mising </div> in the end
1 Like
6

line 89

 </form>
you have closing tag but no were starting tag <form>
1 Like
7

line 51

 <li><label id="name-label">Please enter your name</label>
mising closing tag </li>
1 Like
8

line 54 </l1> you tiped 1 insted of i

1 Like
9

Ty for the fixes! it is now centered but not lined up to the left

10

line 73

 <input type="number" id="number" name="age" placeholder="your age" min="1" max="105"
this is not closed
1 Like
11 
justify-content: left;
1 Like
12

work on your .container
he is holdig oll stuf inside

1 Like
13

Thank you @zaklina! I have some googling to do :slightly_smiling_face:

14

It`s OK we oll do that…
If you stuck be free to ask…

1 Like
15 
 align-text:center;

hire you got tipo 
 it shud be :
text-align:center;

and this:
 text-size:20px;
shud be
 font-size:20px;

example:
https://www.w3schools.com/cssref/pr_text_text-align.ASP

1 Like
16

If you want to center the whole container (like the form), but keep the text left-aligned, you have to give the container a max-width of (for example) 70% and margin: 0 auto.

By the way, your CSS selectors have some errors, you’re trying to target .form and .ul, but those elements don’t have a class, so you don’t need the dot. Currently those selectors don’t do anything on the page.

Does this what you expect?

form {
  max-width:70%;
  margin:0 auto;
  text-align:left;
  font-size: 20px;
}

ul {
  text-align:left;
  font-size: 20px;
}
1 Like
17

She has to fix her HTML first
,you cant aplay CSS to it …

</body>
  </form>
<html>
18

That doesn’t really do anything, but yes that’s invalid HTML. In codepen, you don’t enter <html> or <body> tags, codepen does it for you behind the scenes, so maybe those tags just get ignored. Or it gets auto-corrected by the browser. In any case, running the HTML through a validator is a good idea.

19

Your page is much nicer ,
if you wont to write this < and not cosing err in your HTML
you write &lt;
example:

20

in line 56 <ul> and in line 48 anader <ul>
is not closed you need closing tag </ul>