What am I doing wrong? Tell me please
Can you provide a link to the exercise please? We can’t see what it’s meant to look like.
added margin-right: 100px and the code now works
I’ll go over it step by step and maybe that’ll clarify things for you a bit:
- Notice that
height: 100pxas well
- Remember that padding will help you change the size of the blocks
- Remember that margin helps you with the space around the blocks
- For the top block
- height needs to be 100px. You already have that.
- It needs to be 200px wide. The block is already 100px, so you need to add an extra 100px of padding. You can do this to only one side, or like you did, you can add 50px to both sides. You can use the shorthand for this as well with
padding: 0 50px;
- For the margin, it needs 100px on top, left and bottom sides, while the right can be anything. A simple solution would be to apply
margin: 100px, giving you 100px of margin all around it.
- For the bottom block
- height needs to be 200px. The block is already 100px. Adding 50px at the top and bottom would fix this.
- it needs to be 200px wide as well. The block is already 100px. Again, adding 50px to the right and left would fix this. Together with the previous point, you could apply
padding: 50px;to get 50px of padding in every direction and make the block the size you need.
- For the margin, you want 100px at the top, 100px to the left, 50px to the bottom and anything to the right. It’s important to remember here that the
#tealblock already has a bottom margin of 100px, which means your bottom block
#purplealready has the correct margin in that direction. One possible solution would be to use the shorthand:
margin: 50px 100px;. This works because although you are setting the top margin to 50px, the other block
#tealalready has 100px! So it stays at 100px.