Child Div не показывает границу

Question

У меня есть веб-страница с двумя вложенными элементами div.

Мне нужен внутренний div, чтобы показать его границу, но это не так. Я испробовал каждое предложение, которое мне попалось, но безрезультатно.

пробуя разные решения, я заметил, что родительский div показывает свою границу без особых хлопот. Что я делаю неправильно?

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;
/*this div's border is showing up fine.*/   
}




.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*/
}

HTLM:

<div class="contentItemsWrapper">                
              <div class="contentEventItem style=" border:solid="" red;="" border-width:5px="" 0;="" "="" id="evento1">            
                <div class="DataIncontro" id="dataIncontro1">
                    <span class="month">Decembre</span>
                    <span class="number">26</span>
                    <span class="time">15:00</span>
                    <span class="day">Gio</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">Nome Stadio</span>
                </div>

                <div class="logoSquadra"><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>


                <div class="noteEvento">Aquistabili online fino al xx dicemnre, ore 20.00</div>


                <div class="buttonDiv">
                  <p>
                    <a class="multi-line-button green" href="#" style="width:14em">
                      <span class="title">Compra Ora!</span>
                      <span class="subtitle">30-days free!</span>
                    </a>
                  </p> 
                </div>

              </div>
            </div>

Что я делаю неправильно? Может кто-нибудь, пожалуйста, помогите мне?

Заранее большое спасибо за ваше время.

Answer 1

 border-width:5px 0;

Здесь нет сокращения для более чем одной пограничной позиции. Попробуйте это вместо этого.

border-bottom: 5px solid red;
border-top: 5px solid red;
border-left:none;
border-right:none;

Answer 2

Я в замешательстве, ты хочешь этого?

CSS:

.contentEventItem {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: normal;
    position: relative;
    border: 1px solid #000;
    /* this last one is now working*/
}

Все, что я сделал, это добавил border: 1px solid #000; и удалил этот странный HTML:

border:solid="" red;="" border-width:5px="" 0;="" "="" 

ДЕМО ЗДЕСЬ