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.