Ustawienie div'a po środku strony - dlaczego to nie działa?

pytanie zadane 14 listopada 2019 w HTML i CSS przez El Lirón Obywatel (1,350 p.)

Witajcie! Chciałbym ustawić div szerokiego na 1000px na środku strony. Nie widzę, gdzie popełniam błąd. Dosłownie przepisałem po literce ten kod (myślałem, że literówkę gdzieś robię), ale to nie działa. Dlaczego?

HTML:

<!DOCTYPE HTML>

<html lang="pl">

<head>

	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	
	<meta name="discription" content="portal wiedzy o ślimakach morskich"/>
	<meta name="keywords" content="ślimaki, mięczaki, zwierzęta morskie, morza, oceany"/>
	<title>Ślimaki Morskie</title>
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	
</head>

<body>
	
	<div id="c">
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
		ddddddddddddddddddddddd<br/>
	</div>
	
</body>

</html>

CSS:

body
{
	background-color: #008080;
}

*
{
	margin: 0;
	padding: 0;
}

<!-- odtąd edytowane będą Elementy Strony -->

#c
{
	width: 1000px;
	height: 3000px;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	border: solid 1px black;
}

i to, co mam w przeglądarce:

1 odpowiedź

odpowiedź 14 listopada 2019 przez antypop Mądrala (5,730 p.)
wybrane 14 listopada 2019 przez El Lirón

Najlepsza

O coś takiego Ci się rozchodzi?

 
<html lang="pl">
 
    <head>
     
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
         
        <meta name="discription" content="portal wiedzy o ślimakach morskich"/>
        <meta name="keywords" content="ślimaki, mięczaki, zwierzęta morskie, morza, oceany"/>
        <title>Ślimaki Morskie</title>
         
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <style>         
            body
            {
                background-color: #008080;
            }
            
            *
            {
                margin: 0;
                padding: 0;
            }
            
            <!-- odtąd edytowane będą Elementy Strony -->
            
            .wrapper {
                width: 100%;
            }

            #c
            {
                width: 1000px;
                height: 3000px;
                margin-top: 200px;
                margin-left: auto;
                margin-right: auto;
                background-color: white;
                border: solid 1px black;
            }
        </style>

    </head>
     
    <body>
        <div class="wrapper">
            <div id="c">
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
                ddddddddddddddddddddddd<br/>
            </div>
        </div>
         
    </body>
     
    </html>

komentarz 14 listopada 2019 przez El Lirón Obywatel (1,350 p.)

Dziękuję! Dokładnie tak to miało wyglądać! Ja tak planowałem, żeby c (od słowa "container") było tym ogólnym opakowaniem dla pozostałych divów, które później umieszczę. Co oznacza to, że szerokość jest 100%? Czy wrapper musi być klasą?

komentarz 14 listopada 2019 przez antypop Mądrala (5,730 p.)

Przeglądnij to sobie, na pewno Ci to ułatwi.

https://miroslawzelent.pl/kurs-html/

Staraj się ograniczać do minimum ID a korzystać z CLASS.

komentarz 14 listopada 2019 przez El Lirón Obywatel (1,350 p.)

Ok, dzięki. Interesuje mnie, dlaczego marginesy automatyczne dla diva c nie działają kiedy jest on bezpośrednio w <body>, ale gdy jest wewnątrz innego diva (wrappa) to działają.