1

I have a problem with margin and padding. I've tried to put them everywhere but no changes there is always a small gaps like a margin-bottom: 2px;. Here's a screenshot: ScreenShot (from LightShot)

And my code (run in fullpage):

h1 {
  font-size: 50px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  background-color: gray;
  width: 80%;
  max-width: 90%;
  min-height: 5em;
  height: auto;
  margin: 0 auto;
  margin-top: 5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card {
  display: inline-block;
  margin: 0;
}

.columnl {
  float: left;
}

.columnr {
  float: right;
}

.menu {
  width: 65%;
}
.menu img {
  width: 100%;
}

.content {
  width: 35%;
  float: left;
}
<h1>Official Yazrihm's website</h1>

<div class="container">
  <div class="card">
    <div class="columnl menu">
      <img src="https://images.unsplash.com/photo-1459454783596-1f171a3afc9f?dpr=1&auto=format&fit=crop&w=1080&h=721&q=80&cs=tinysrgb&crop=">
    </div>
    <div class="columnl content">
      <h1>Lorem ipsum</h1>
      <p>consectetur adipiscing elit. Praesent vitae luctus orci. Quisque pretium, velit a iaculis egestas, ipsum sapien tristique eros, eu mollis metus nisl vitae mauris.</p>
      <p>Mauris et condimentum est, vel commodo eros. Cras finibus eget arcu sit amet dictum. Quisque condimentum turpis pharetra consequat aliquet.</p>
    </div>
  </div>

  <div class="card">
    <div class="columnr content">
      <h1>Nullam elementum</h1>
      <p>Vivamus congue euismod velit, ac pretium neque. Proin rutrum vitae turpis id placerat. Integer semper quam id auctor fermentum.</p>
      <p>Nulla ut lectus ex. Curabitur in neque placerat, condimentum magna vel, malesuada risus. Integer sem quam, lobortis quis varius vitae, tempor vel risus.</p>
    </div>
    <div class="columnr menu">
      <img src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=">
    </div>
  </div>
</div>

I also have a reset css file from eric meyer

Thanks, you're free to translate in good English. Yazrihm.

vishnu
  • 2,848
  • 3
  • 30
  • 55
kr4xkan
  • 25
  • 5

0 Answers0