mam problem ze zrobieniem ramki graficznej w HTML, w której będzie znajdował się tekst. Przykładowa ramka jaką chcę zrobić:

Zrobiłam to za pomocą instrukcji opisanych tu kurs html , ale coś mi się sypie. Ramka ma 300 px szerokości więc <div> w którym będzie tekst ustawiłam na 200 px szerokości, bo tyle ma białe tło w środku ramki, przeznaczone na tekst, (margin-left ustawiłam na 50) ale wtedy wszystko się sypie i wygląda to tak:

Kombinuję na różne sposoby z margin-left i przesuwaniem albo bloku z tekstem, albo środkowego elementu - białego paska, w którym ma być tekst, ale ciągle z którejś strony coś wystaje. Co robię źle i jak to naprawić?
Albo jak zrobić taką ramkę w inny sposób?