I am struggling with a webpage that has two nested divs.
Despite trying all the suggestions I have found, I still cannot get the inner div to display its border. On the other hand, I have noticed that the parent div's border shows up without any issues. What could be the problem?
CSS
.contentItemsWrapper
{
margin:auto;
width: 900px ;
margin-left: auto ;
margin-right: auto ;
text-align:center;
padding-top:20px;
padding-bottom:20px;
border:solid red;
border-width:5px 0;
/*The border of this div is visible.*/
}
.contentEventItem {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
position: relative;
border:solid red;
border-width:5px 0;
/*This last one is not working*/
}
HTML:
<div class="contentItemsWrapper">
<div class="contentEventItem style=" border:solid="" red;="" border-width:5px="" 0;="" "="" id="evento1">
<div class="DataIncontro" id="dataIncontro1">
<span class="month">December</span>
<span class="number">26</span>
<span class="time">15:00</span>
<span class="day">Thu</span>
</div>
<div class="logoSquadra"><span class="helper"></span><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="nameEventLocation" id="nameEventLocation1">
<strong class="eventname">New Basket Brindisi - Cremonese</strong>
<span class="location">Stadium Name</span>
</div>
<div class="logoSquadra"><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="noteEvento">Available online until xx December, 8:00pm</div>
<div class="buttonDiv">
<p>
<a class="multi-line-button green" href="#" style="width:14em">
<span class="title">Buy Now!</span>
<span class="subtitle">30-days free!</span>
</a>
</p>
</div>
</div>
</div>
What could be the issue here? Can anyone offer some guidance or help?
Thank you for taking the time to assist me.