# Super beginner question

**URL:** <https://forum.kirupa.com/t/super-beginner-question/331971>\
**Category:** web dev\
**Created:** [December 12, 2013, 6:06am UTC](https://forum.kirupa.com/t/super-beginner-question/331971 "2013-12-12T06:06:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![iluvAS](https://avatars.discourse-cdn.com/v4/letter/i/e95f7d/32.png) [@iluvAS](https://forum.kirupa.com/u/iluvAS)\
**Post date:** [December 12, 2013, 6:06am UTC](https://forum.kirupa.com/t/super-beginner-question/331971/1 "2013-12-12T06:06:35Z")

</div>

Hey there guys, I just started learning some basic web dev. I’m having problems with making a black rectangle surrounding my div.

_drawing.html_

```auto

<html>
    <head>
        <title> Drawing in JS </title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    </head>

    <body>
        <div id="seg1" class="center">
            <h1 class="style1">
                My Canvas
            </h1>
            <canvas id="canvas" width = "550" height = "400">
                You noob, use a HTML5 compatible browser.
            </canvas>
        </div>
        <script type="text/javascript"></script>
    </body>
</html>

```

\*stylesheet.css  
\*

```auto

#seg1{ background-color: rgba(0,0,0,0.5);}
.style1{ font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;}
.center{ text-align: center;}
canvas{ border: 1px dotted brown; background-color:#FFFFFF;}
body{ background-color:#F1F1F1;}

```

The rectangle (div background) spans from the very left of my browser till the very right.  
**How do I make the rectangle be the same width as the contents in the div?**

Additional Questions:  
Can i put in padding for the width of the rectangle? How do i define that?  
Any book recommendations that goes from beginner to in depth for html/css?