HTML - Putting text in some field

Question

I'm trying to create a single sentence in some kind of a field I created, and every time I just make the font bigger it pops out of the field, and I gotta lower the font-size to put it inside again.

Can I make the font size bigger and keep it in the field at the same time? My code:

HTML:

<div id="wrapper">
    <h1 style=""> Nothing Created Yet </h1>
</div>

CSS:

#wrapper {
    width: 1000px;
    height: 120px;
    margin-top: 100px;
    border: 5px solid gray;
    border-radius:500px;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial;
    font-size:40px;
    background-color: #F0EEF3;
    border-color:red;
}

What I get:

Answer 1

You firstly need to remove the browser-default margin styling on your h1 element:

#wrapper h1 {
    margin: 0;
}

Then you should ideally give your #wrapper element a line-height equal to its height:

#wrapper {
    ...
    height: 120px;
    line-height: 120px;
}

JSFiddle demo.

Answer 2

try this DEMO

#wrapper {
    width: 1000px;
    height: 120px;
    margin-top: 100px;
    border: 5px solid gray;
    border-radius:500px;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial;
    font-size:40px;
  line-height:10px;
    background-color: #F0EEF3;
    border-color:red;
  text-align:center;
}

Answer 3

The reason why this happens is you set fixed width and height for the DIV and when you increase the font size, it could no longer fit inside the DIV. So, the answer is it is impossible in fixed size DIV like this.

Answer 4

or do -added class to the header and put the margin to 0 and center the text (jsfiddle.net/6GRGH/)