Black Box Appears around text

Hello WordPress Friends,

So I am having this continuous problem with this black box appearing in my divs. I am not sure how to get rid of it or what exactly is causing it.

http://magniflood.com/service-test-page/

If you go to this link you can see ‘Text’ in a black box. It’s not suppose to be and it just appears there.

Here is also the code for that section

HTML

<div id="wrapgreybackgroundservicepage">

<div id="greybackgroundservicepageone">
<h2><strong>Text</strong></h2>
<p>Text Content here.</p>
</div>

<div id="greybackgroundservicepagetwo">
<h2><strong>Text</strong></h2>
<p>Text Content here.</p>
</div>

<div id="greybackgroundservicepagethree">
<h2><strong>Text </strong></h2>
<p>Text Content here.</p>
</div>

</div>

CSS

/*Info Boxes*/
h2 {
    margin: auto;
    font-weight: 100;
    font-size: 1.5em;
    text-align: center;
    padding: 15px; /**Text from top of box**/
    position: relative;
        }
h2:after {
    content: '';
    background: black;
    width: 100%;
    height: 1px; /**Thickness of underline **/
    display: block;
     
}

#wrapgreybackgroundservicepage{
	width:auto;
        margin:0 auto;
        border:0px solid;
        height:200px;
        display:block;
	padding-top: 550px;
	padding-left: 350px;
	padding-right: 350px;
        	  
}
#greybackgroundservicepageone {
	text-align:center;
    background:#D3D3D3;
	height:300px;
	width: 250px;
	float: left;
	box-shadow: none;
        
}

#greybackgroundservicepagetwo {
	text-align:center;
    background:#D3D3D3;
	height:300px;
	width: 250px;
	float: left;
	margin-left: 105px;
}

#greybackgroundservicepagethree {
	text-align:center;
    background:#D3D3D3;
	height:300px;
	width: 250px;
	float: right;
	}

#h2 span {
    position: relative;
    color: #842990;
    font-weight: 100;
    border-bottom: 1px solid black;
}

#h2 span:before {
    content: '';
    position: absolute;
    width: 35%;
    height: 5px;
    bottom: -3px;
    left: 0;
    background-color: black;
    
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

I am actually thinking its my h2 elements interfering with maybe a similar name with another CSS file. Can someone help me work around this?

Thank You

• This topic was modified 8 years, 11 months ago by bdbrown.