issue with section size

Question

i have an issue with the section size its pretty small one would like to know how to make it right the section have one image on the left and text and info in the right the image taken as 100% width but under it there are some space .

/*Start About me */
.about-me{
 background-color: #555;
 overflow: hidden;
}
.about-me .image{
 float: left;
 width: 40%;
}
.about-me .image img{
 width: 100%;
}
.about-me .info{
 float: left;
 width: 60%;
}
.about-me .info h1,p{
 padding-left: 40px;
}
.about-me .hobis{
 overflow: hidden;
 margin: 40px;
}
.about-me .hobis > div{
 float: left;
 width: 50%;
}
/*End About me */

<!-- Start About me section -->
 <div class="about-me">
  <div class="contaner">

   <div class="image">
    <img src="http://placehold.it/350x300" alt="test">
   </div>
   
   <div class="info">

    <h1>about me </h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quo aspernatur veniam obcaecati corporis earum iure error Libero <br>minima laboriosam asperiores ad obcaecati provident, exercitationem aperiam tempora ducimus excepturi!</p>

    <div class="hobis">
     <div>Web Design</div>
     <div>Socer</div>
     <div>Drawing</div>
     <div>Watching Movies</div>
    </div>
   </div>
  
  </div>
 </div>
 <!-- End About me section -->

@Stages percentage heights don't take effect unless the parent element has a height defined. In which this case the parent is not, so `height: 100%;` won't work. — hungerstar, Jul 11 '16 at 15:15

score 0 · Accepted Answer · answered Jul 11 '16 at 15:13

Set your image to display: block;. The space you are seeing is due to the space left for descender height. Inline elements, as an <img> is by default, provide space for the descender of lower-case letters like y, j and g. Setting it to block removes the descender height.

.about-me .image img {
    width: 100%;
    display: block;
}

issue with section size

1 Answers1