Your code for 4 divs should be like this:
<div class="row">
<div class="col span-1-of-4">
</div>
<div class="col span-1-of-4">
</div>
<div class="col span-1-of-4">
</div>
<div class="col span-1-of-4">
</div>
</div>
Solution 1 :
Problem :
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources//css/style.css">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400&display=swap&subset=hebrew" rel="stylesheet">
<title>לימור מלול - יבוא בידיים טובות</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/css/images/%D7%9B%D7%93%D7%95%D7%A8.png" alt= "יבוא בידיים טובות לוגו" class="logo">
<ul class="main-nav">
<li><a href="#">קצת עליי</a></li>
<li><a href="#">השירותים שלנו</a></li>
<li><a href="#">לקוחות מספרים</a></li>
<li><a href="#">צור קשר</a></li>
</div>
</nav>
<div class="hero-text-box">
<h1> יבוא מוצלח מתחיל כאן.<br> המרכז המוביל בישראל ליבואנים מתחילים. </h1>
<a class="btn btn-full" href="#"> אני רוצה להתחיל לייבא </a>
<a class="btn btn btn-outline" href="#"> אני רוצה לקרוא עוד </a>
</div>
</header>
<section class="section=features">
<div class="row">
<h2> קורסים וליווי אישי — תוכניות הדגל שלנו </h2>
<p class="long-copy">תוכניות הדגל של לימור מלול- יבוא בידיים טובות.<br> בחרו את התוכנית המתאימה לכם והתחילו כבר היום.</p>
</div>
<div class="row">
<div class="col span-4-of-4">
<h3>קורס ניהול יבוא מנצח</h3>
<p> הקורס שילמד אותך איך לנהל את הליכי הייבוא שלך בצורה יעילה<br> איך להגדיל את ההכנסות שלך מהייבוא <br> ואיך לבדוק האם אתה יכול להוזיל עלויות בתהליך היבוא.</p>
</div>
<div class="col span-3-of-4">
<h3>קורס מתקדמים</h3>
<p> קורס למתקדמים שיבוא את המצב שלך ביבוא<br> למצב שבו אתה שולט בכל דבר שקיים בתחום<br> מתאים גם למתחילים וגם למתקדמים.</p>
</div>
<div class="col span-2-of-4">
<h3>ליווי אישי</h3>
<p> ליווי אישי על ידי לימור מלול מנכלית המרכז והאחראית על כל התוכן והידע<br>שנמצאים באתר ובקורסים <br> בליווי תלמד באופן אישי איך להקים עסק ביבוא ולהגיע למצב שבו היבוא שלך כמעט ומנהל את עצמו.</p>
</div>
<div class="col span-1-of-4">
<h3>הרצאת יבוא ללא חששות</h3>
<p>הרצאה מבוא לעולם היבוא<br> בהרצאה נלמד מושגים בסיסיים, איך התהליך עובד <br> ותוכלו לקבל ידע וכלים כיצד להתחיל לייבא כבר עכשיו.</p>
</div>
</div>
</section>
</body
and this is the grid.css i’m using, it is a grid I got from the browser for the course i’m doing. maybe it’s because my code is rtl and the instructor using ltr so the grid is good only for ltr codes.
please someone explain i really need help with this
thanks for the helpers if you need my style.css file i’ll copy it to the comments
edit: in my style.css file i also have this code:
.row {
max-width: 1140px;
margin: 0 auto;
}
Comments
Comment posted by yanca
Read more how grid works to better understand it. If you use for example grid “of-4” it means, that the sum of your blocks (div) width should be equal to 100%. Creating 4 divs, you should use the class .span-1-of-4 for each of them.