You will practice modifying and centering a web page in this Hands$-$On Practice as you update the index.html file from Hands$-$On Practice $6\mathrm{.}3($shown in Figure $6\mathrm{.}14).$ A common design practice is to configure the background color of the wrapper or container to be a light, neutral color that provides good contrast with text. When complete, your web page will be similar to the one shown in Figure $6\mathrm{.}15.$

Create a new folder called centerch$6.$ Copy the index.html$,$ background.jpg$,$ and lighthouselogo.jpg files from the chapter$6/6\mathrm{.}3$ folder.

Launch a text editor and open the index.html file

Edit the embedded CSS and configure the h$1$ selector. Remove the width style declaration. Configure a medium blue $($#$9$DB$3$DC$)$ background color and a $0$ top margin $($use the margin$-$top property$).$

Edit the embedded CSS and configure a new selector, an id named container. Add$$style declarations for the background$-$color, padding, width, min$-$width, $$margin$-$left, and margin$-$right properties as follows:

#container $\{$ background$-$color: #FFFFFF; padding: $2$em; margin$-$left: auto; margin$-$right: auto; width: $80\%$; min$-$width: $800$px; $\}$

Edit the HTML$.$ Configure a div element assigned to the id container that wraps or contains the code within the body section. Code an opening div tag on a new line after the opening body tag. Assign the div to the id named container. Code the closing div tag on a new line before the closing body tag.

Save the file. When you test your index.html file in a browser, it should look similar to Figure $6\mathrm{.}15.$ The student files contain a sample solution in the chapter$6/6\mathrm{.}4$ folder. A common design practice is to configure the background color of the wrapper or container to be a light, neutral color that provides good contrast with text.