Form only centers on codepen

This form I made on codepen centers on code pen, but when I paste it into visual studio code and try to open it as an .html file, the form appears all the way to the left of the page. Why?

https://codepen.io/gtrman97/pen/PobarPP

Are you linking correctly to the stylesheet?

You say “paste it into visual studio code”.
Are you copying the code from both the HTML editor and the CSS editor?

Or are you exporting the pen and then pasting it in?

I think so. I have two files in same directory: form.html and form.css

At the top of html file I have <link rel="stylesheet" href="form.css">

Does “at the top of the html file” mean this is in the head element?

Review this for an understanding of the HTML boilerplate tags.
Hope that helps.

Yeah like this:

 <head>
    <title>My Form</title>
    <link rel="stylesheet" href="form.css"> 
  </head>

That looks correct.

One way to ensure the stylesheet is being picked up correctly (should have thought of this sooner) is the background on the form lightblue?

Yes everything is applied with the css except the centering.

Ohhhh…hit me with a stick.

Sorry, I see it now. If you run your HTML code through the W3C validator you’ll see it too.
You’re using an obsolete attribute. Looks like codepen is forgiving and VS Code is not.
On a side note, it’s always a good idea to keep all your styling external. Do not use in-line (or internal) styling.

Also a side note, don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.

I still don’t see it. What obsolete attribute am I using?

Also, I didn’t use in-line styling. I made a separate CSS file.

And what would be the CSS equivalent for <br> ?

Did you run your HTML code through the W3C validator? If so, you would have seen this;
Error : The align attribute on the div element is obsolete. Use CSS instead.

From your HTML code, this <div align="center"> is in-line styling

There is no equivalent. Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.

It looks like <div align="center"> was causing it to center. Getting rid of it makes it stick to the left margin. How do I get it to center again?

That was the point, the align attribute is obsolete. Codepen is letting it through, VS Code is not accepting it. So what can you use instead?
The second point was that the obsolete align attribute is in-line styling which you don’t want to use. So what can you use in CSS instead?

This is where FCC’s Read - Search - Ask method comes into play. We don’t want to just give you an answer. You don’t learn that way. What would you search for if you want to center a form element? What have you tried that doesn’t work that you don’t undertand?

And don’t forget, you don’t want to use the <br> element to force line breaks or spacing. That’s what CSS is for.

I searched around for it and everyone seems to be saying text-align: center;,

but I already have that line in my CSS file with the survey-form id selector

and it’s not centered.

I’ll preface this with it’s late here and this will probably be my last response until tomorrow.

You’re very fixated with text-align: center; but understand that this is centering text and you want to center more than just text.
To help you understand how you have your elements place try temporarily adding the following universal selector;

* {
  border: solid 1px green;
} 

Hint:

what would a margin property do for you?

So basically text-align had nothing to do with the border and form yes?

margin:auto; seemed to do the trick.

Correct…text-align is used to set the horizontal alignment of text.

Good job

Another way to look at it:

Text-align centers things that are in block-level containers (divs).

margin: auto centers the actual container.

No problem in code. Opens in the middle of page when i tried . Pls check two steps on your side

  1. html file has proper format i mean starts from !DOCTYPE , includes head element .
  2. embeds style.css file