How to make a central box on a webpage in css?

Question

I have this code in CSS, it should create a green box, but it creates a green lines insted. I do not understand why since there is code for padding and margin.

 .second {text-align: center;
        background-color: green;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        font-weight: 100;

I expect it to be a green box with 10px padding in the each side.

Answer 1

You have to assign width and height properties, like this:

.second {
  text-align: center;
  background-color: green;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  font-weight: 100;
  width: 300px;
  height: 200px;
}