Почему мой список элементов спросил?

Question

Так вот что это выглядит сейчас:

http://imgur.com/XaWsIja,wPmE0PX#0

Вот что я пытаюсь добраться до (проектных доказательств):

http://imgur.com/XaWsIja,wPmE0PX#1

Там две проблемы, которые я не смог понять здесь. Это крошечный небольшой пробел между logLeft и logRight. Я хочу, чтобы эти элементы списка были связаны друг с другом. И другая проблема, очевидно, заключается в том, что я не хочу, чтобы logRight так падал. Однако я не вижу ничего, что отталкивает его от logLeft, поэтому я смущен.

Вот мой код:

HTML:

<section id="latestLogs"> 
<fieldset class="heading"><legend>Latest Logs</legend></fieldset> 

<ul> 
    <li class="log"> 
     <ul> 
      <li style="background-image: url(/Css/images/temp/stair.jpg);background-position:center;" class="logLeft"> 
       <h3 class="logTitle">This is the Name of the Log</h3> 
       <h4 class="logLoc">East Stairwell</h4> 
       <p class="logDesc">This is the description of the log. This is the description of the log. This is the description of the log. This is the description of the log. This is the description of the log. This is the description of the log.</p> 
      </li> 
      <li class="logRight"> 
       <p> 
        Wednesday <br /> 
        09.23.2015 
       </p> 
       <ul class="logCharacters"> 
        <li>Opera</li> 
        <li>Alexandr</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="log"> 
     <ul> 
      <li style="background-image: url(/Css/images/temp/waterbedroom.jpg);background-position:center;" class="logLeft"> 
       <h3 class="logTitle">This is the Name of Another Log</h3> 
       <h4 class="logLoc">Room 302</h4> 
       <p class="logDesc">Some log descriptions are very short.</p> 
      </li> 
      <li class="logRight"> 
       <p> 
        Tuesday <br /> 
        09.22.2015 
       </p> 
       <ul class="logCharacters"> 
        <li>Brandon (DM)</li> 
        <li>Rikart</li> 
        <li>Diego</li> 
        <li>Vaithen</li> 
        <li>Damocles Iota</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="log"> 
     <ul> 
      <li style="background-image: url(/Css/images/temp/bathroom.jpg);background-position:center;" class="logLeft"> 
       <h3 class="logTitle">Some Log Descriptions Are Very Long Because People Just Keep Making Obscure References</h3> 
       <h4 class="logLoc">10th Floor Womens Restroom</h4> 
       <p class="logDesc">Some log descriptions are really long, like he just kept talking in one long incredibly unbroken sentence moving from topic to topic so that no-one had a chance to interrupt; it was really quite hypnotic. Some log descriptions are really long, like he just kept talking in one long incredibly unbroken sentence moving from topic to topic so that no-one had a chance to interrupt; it was really quite hypnotic. Some log descriptions are really long, like he just kept talking in one long incredibly unbroken sentence moving from topic to topic so that no-one had a chance to interrupt; it was really quite hypnotic.</p> 
      </li> 
      <li class="logRight"> 
       <p> 
        Monday <br /> 
        09.21.2015 
       </p> 
       <ul class="logCharacters"> 
        <li>Rekah</li> 
        <li>Big Ben</li> 
        <li>Fallon</li> 
        <li>Walker</li> 
        <li>Tseng</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="log"> 
     <ul> 
      <li style="background-image: url(/Css/images/temp/lobby.jpg);background-position:center;" class="logLeft"> 
       <h3 class="logTitle">This Log Title is So Freaking Fabulous</h3> 
       <h4 class="logLoc">Lobby</h4> 
       <p class="logDesc">I wanted to write a long description, but instead I just copy and pasted this three times. I wanted to write a long description, but instead I just copy and pasted this three times. I wanted to write a long description, but instead I just copy and pasted this three times.</p> 
      </li> 
      <li class="logRight"> 
       <p> 
        Sunday <br /> 
        09.20.2015 
       </p> 
       <ul class="logCharacters"> 
        <li>Jarrett (DM)</li> 
        <li>Silver</li> 
        <li>Chastity</li> 
        <li>Trusken</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

CSS (SASS, на самом деле):

#latestLogs { 
    h3, h4 { 
     margin: 0px 0px 0px 0px; 
    } 
    ul, li { 
     list-style-type: none; 
     padding: 0px; 
    } 
    .log { 
      display: inline-block; 
      li { 
       display: inline-block; 
      } 
    } 
    .logLeft { 
     height: 300px; 
     width: 300px; 
     padding: 10px; 
     position: relative; 
     overflow: hidden; 
     .logTitle, .logLoc, .logDesc { 
      text-shadow: 3px 3px 2px #000; 
     } 
     .logDesc { 
      display: none; 
     } 
     .logLoc { 
      position: absolute; 
      bottom: 10px; 
      right: 10px; 
     } 
    } 
    .logLeft:hover { 
     .logTitle, .logLoc { 
      display: none; 
     } 
     .logDesc { 
      display: inline; 
      font-weight: bold; 
     } 
    } 
    .logRight { 
     display: block; 
     height: 300px; 
     width: 200px; 
     background: rgba(10, 30, 32, .5); 
     padding: 10px; 
     p { 
      margin: 0px 0px 20px 0px; 
      color: $gold; 
      font-weight: bold; 
     } 
     .logCharacters { 
      color: $teal; 
      font-weight: bold; 
      li { 
       display: list-item; 
      } 
     } 
    } 
} 

Answer 1

оба вопроса, как представляется, в связи с использованием display: inline-block. Сначала вам нужно включить vertical-align: top, чтобы исправить вопрос о том, что боковые столбцы слишком низкие. Во-вторых, display: inline-block добавляет естественное расстояние 1 или 2 пикселя между элементами. Есть некоторые хаки, чтобы исправить это, но, на мой взгляд, если вы хотите, чтобы элементы касались вас, лучше использовать float