How can i break the paragraph property of tables


Haydar Damn

enter image description here

I am a new learner and can you tell me my bad habits with my code and why this space between image and "Ford" text never closes.

<!DOCTYPE html>
<title>FiyaskoCar|En Pahalı Arabalar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

.container {
position: relative;
width: 100%;

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;

.container:hover .overlay {
width: 100%;

.text {
color: white;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;


display: flex;
flex-flow: column;

max-width: 323px;
margin: auto;

table {
border-spacing: 90px 0;


figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 5px;
text-align: center;
width: 299px; height: 166px;



<body bgcolor="#6B0808" text-color="white" >

<font size = "6">
<center> <img src=logo.png align="middle" height="140" width="140"/> </center>
<hr width="500">

<p style="background-color:hsla(9, 100%, 64%, 0.5);"><font face = "Comic sans MS" size="5">Fiyasko<span style="color:red">Car</span>
Burada her şey ÇOK PAHALI!!!


<div class="container">
<a href = homepage.html><img src=fordcar.png class="special">
<div class="overlay">
<div class="text">Ford</div>



<td> <div class="container">
<a href = homepage.html><img src=volkswagencar.png class="special">
<div class="overlay">
<div class="text">Volkswagen</div>

<figcaption>Volkswagen</figcaption> </td></a>

<td> <div class="container">
<a href = homepage.html><img src=bmwcar.jpg class="special">
<div class="overlay">
<div class="text">BMW</div>



Continue reading...