How to fix Joomla website text disorientation/displacement?

Question

This website localhotchat.com has text flowing out of the red bar. I have tried adjusting it but, it doesn't seem to go away.

The 14pt text snippets on the homepage (and internal) are supposed to be inside the red_colored_strip but it ain't and half of it is flowing outside (the text is white in color so you will have to select it to view it). I am not familiar with Joomla and don't know how to fix this. Please offer some advice.

Here are the classes being used by the where the disoriented text is located on the html sheet.

.steps_blurb {
    margin: 0 auto;
    padding: 0;
    color: #ffffff;
    background-image: url('../images/redbox_bg01.jpg'); /*url('../images/redbox_bg02.jpg');*/
    background-repeat: no-repeat;
    background-position: top left;
    width: 845px;
    height: 65px;
    border: none;
}

.steps_blurb01, .steps_blurb01td {
    color: #ffffff;
    font-size: 14pt;
    text-align: center;
    border: none;
  /*margin-top: 40px; Added by yuvi to fix the red_banner issue*/
}

Answer 1

Find this class in your template.css:

.steps_blurb01, .steps_blurb01td

Located in root/templates/lhc13/css/template.css

And add this:

margin-top: -20px;

So the whole block looks like this:

.steps_blurb01, .steps_blurb01td {
    color: #ffffff;
    font-size: 14pt;
    text-align: center;
    border: none;
    margin-top: -20px;

}

You can adjust -20 up or down if you need more or less space.

Answer 2

the table row that holds the red box, is above the next row..

to fix it, I would create a, p tag with a class which can pull the text up!

<style>
.pullup{
    margin: -85px 0px 0px 0px !important;
    position: absolute;
    padding: 0px;
    width: 93%;
    text-align: center;
}
</style>
<p class="pullup">All text here</p>

:)