none
HTML-Border Help

    Question

  • I am trying to make a border on my html, but it is not working.Its supposed to make it around the body, but it's not.This is my CSS stylesheet. What I want the border to cover everything not just the menu.The CSS is the bolded one and the html is underlined.

    ********* Beginning of CSS ***************

    *****************************************

    html{ box-sizing: border-box; } *, *:before, *::after{ box-sizing: inherit; } body{ background-color: Thistle; border: 2px solid Black; border-radius: 10px; font-family: sans-serif; margin-right: auto; margin-left: auto; max-width: 1024px; min-width: 256px; padding-top: 8px; padding-left: 24px; padding-right: 24px; padding-bottom: 24px; } header{ } header p { float: left; font-size: 16px; font-weight: bold; margin-top: 0px; } header h1 { font-size: 16px; text-align: right; } nav ul{ list-style-type: none; background-color: #B577B5; border: 2px solid BLack; border-radius: 10px; font-family: sans-serif; font-weight: bold; padding: 16px; } nav ul li{ display: inline; border-right: 2px solid #111111; padding-left: 8px; padding-right: 8px; } nav ul li:last-child { border-right: none; } nav ul li a { text-decoration: none; color: #111111 } nav li.selected{ color: #606060; } nav ul li a:hover{ text-decoration: underline; } section{ background-color: #FFFFFF; margin-bottom: 24px; min-height: 320px; padding-left: 24px; padding-right: 24px; } aside{ } footer{ } footer p.copyright { float:left; margin-top: 0px; } footer p.contact{ text-align: right; } img.small{ float: left; height: 200px; margin-bottom: 24px; margin-right: 24px; } img.medium{ max-width: 360px; width: 50% } img.large{ width: 100% } body,section,img{ border: 2px solid #B1B1B1; border-radius: 16px; } article{ float: left; width: 66%; } aside{ float: left; padding-left: 24px; border: 2px solid Black; border-radius: 10px; width: 24%; margin-left: 24px; margin-right: 24px; } footer{ clear:both;

    }

    ********* End of CSS ***************

    *****************************************


    <!DOCTYPE html>
    <html>
       <head>
         <title>My famliy</title>
         <link type ="text/css" rel="stylesheet" href = "css/my-first-stylesheet.css"/>
       </head>
       <body>
         <header>

               <nav>
             <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="myfamily.html">MY FAMILY</a></li>
                <li><a href="whatido.html">WHAT I DO</a></li>
              </ul>
            </nav>
          </header>
          <article>
            <h1>My Family</h1>
            <p>Welcome <p>
            <p>Meet my Family<p>

          <section>
              <h2>    Justin Loo</h2>
              <p>    I am the creator of this page</p>
              <p>    I am the youngest on in m family and I am 12 years old</p>

          </section>
              <p></p>

          <section>
            <h2>    Emily Loo</h2>
              <p>   </p>
              <p>    </p>
              <p>    </p>
            </section>
            <p></p>


          <section>
              <h2>    Pius Loo</h2>
                <p>   </p>
                <p>    </p>
              </section>
              <p></p>


              <section>

                </section>
                <p></p>

          </article>
    <aside>

    </aside>

          <p></p>

        </body>
    </html>


    Saturday, January 27, 2018 8:01 PM

All replies