WebStorm 4 ( Inline and block )

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Inline & Block Styling</title>
</head>
<body>
<ul>
    <li><a href="#">Tech</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Fashion</a></li>
    <li><a href="#">Sports</a></li>
</ul>
<br><br>
<img src="./css/img/img2.jpg" alt="My image">
<br><br>
<div class="box">
    <h3>Heading </h3>
    <p>The doer gains anger which is not psychic.<br>
    The seeker gains.<br>
    Happiness doesn’t wisely hear any lotus —
        but the masteris what wrestles.</p>
</div>
<div class="box">
    <h3>Heading </h3>
    <p>The doer gains anger which is not psychic.<br>
        The seeker gains.<br>
        Happiness doesn’t wisely hear any lotus —
        but the masteris what wrestles.</p>
</div>
<div class="box">
    <h3>Heading </h3>
    <p>The doer gains anger which is not psychic.<br>
        The seeker gains.<br>
        Happiness doesn’t wisely hear any lotus —
        </p>
</div>
</body>
</html>


body
{
    font-family: Arial,sans-serif;
}
li{
  /* Sekoj link od listata e block element i zazema celosen prosor*/
    display: inline;
    /* Sea go pravime inline taka shto visokot prostor go nema i ke se pripojat horizontalno */

}
li a{
    padding-right: 20px;

}
img
{
    height: auto;
    width: auto;
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: auto;
    border: 3px solid black;
    border-radius: 10px;
    box-sizing: border-box;
}
.box
{
    background: grey;
    display: inline-block; /* Box e prvicno block element no ako sakame horizontalno site da gi namestime morame
    da koristime inline - block bidejki samo so online ne bi rabotelo */
    padding: 20px;
    margin-bottom: 15px;
    width: 31%;
}