I am learning about how to make boxes, containers and the like right now, and I am trying to format them. But I have run into issues on attempting to freely change the size of the boxes. For some reason, I can’t seem to change the width of the box to make it extend all the way to the end of the left side of the screen? Trying to use 0px and negative values didn’t seem to do anything either. Using 0px for the width makes it really thin and clumped up together.
Here is my code. I have been taking notes as well so let me know if I got something wrong there.
* {
box-sizing:content-box;
}
.container{
background-color: hsl(0, 0%, 24%);
}
.box{
background-color: hsl(0, 0%, 100%);
border: 2px solid;
/* TRBL */
/* Using the bottom part of padding makes
white space go down instead of extend up? */
/* Using the right and left causes the white space
to go right with both directions */
/* Bottom right is normal direction of the box extension. */
/* Padding is space inside element, Margin is space outside element */
/* vh, vw, em, rem cannot allow big numbers like 100. */
/* Px allows usage of big numbers like 100 */
/* Percentage impacts whole box */
/* Gives space inside box. Padding-bottom means gives space at bottom side
of box */
padding: 0px 0px 0px 0px;
position: relative;
left: 200px;
top: 100px;
width: 0%;
height: 70%;
float: left;
text-align: center;
}
The original code is this:
* {
box-sizing:content-box;
}
.container{
background-color: hsl(0, 0%, 24%);
}
.box{
background-color: hsl(0, 0%, 100%);
border: 2px solid;
/* TRBL */
/* Using the bottom part of padding makes
white space go down instead of extend up? */
/* Using the right and left causes the white space
to go right with both directions */
/* Bottom right is normal direction of the box extension. */
/* Padding is space inside element, Margin is space outside element */
/* vh, vw, em, rem cannot allow big numbers like 100. */
/* Px allows usage of big numbers like 100 */
/* Percentage impacts whole box */
/* Gives space inside box. Padding-bottom means gives space at bottom side
of box */
padding: 0px 0px 0px 0px;
position: relative;
left: 200px;
top: 100px;
width: 70%;
height: 70%;
float: left;
text-align: center;
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bro Code</title>
<link rel="stylesheet" href="test.css">
<body>
<div class="container">
<div class="box">
<h2>This is #2</h2>
</div>
</div>
</body>
</html>
Here is the original look of the box before I included 0px:
This is where I am trying to extend: