Как выравнить текст и сделать блоки одной высоты?

Question

[Alexander]

Хочу чтобы текст с оглавлением был на одной высоте наряду с другими блоками. И так же внизу
Подскажите пожалуйста)

Спасибо всем кто помогал, премного Вам благодарен, вы - мастера своего дела!!)

Comments

[Noder SS]

дайте код, пожалуйста.

[Alexander]

Noder SS,

#faq {
    display:flex;
    flex-direction: row;
    display: inline-block;
    background-color: #fff;
    border-top: 2px dashed #e4e3e3;
    width: 100%;
    float: left;
    padding-top: 70px;
    padding-bottom: 70px;
}

#faq div {
    width: 25%;
    margin-left: 6%;
    float: left;
}

#faq .heading {
    font-weight: bold;
    color: #7d7d7d;
    display: block;
    margin-bottom: -0.4em;
    font-size: 2em;
}

#faq p {
    font-family: Arimo, Helvetica, sans-serif;
    color: #4a4a4a;
    font-size: 0,95em;
    margin-bottom: 50px;
}

[Alexander]

Noder SS,

<div id="faq">
  <div>
    <span class="heading">Буддизм – это религия?</span><br>
    <p>Для многих буддизм – это нечто большее, чем религия, скорее философия или стиль жизни. Это философия в смысле «любви к мудрости»</p>
    <span class="heading">Что такое мудрость?</span><br>
    <p>Буддизм учит, что мудрость должна развиваться вместе с состраданием. Одна возможная крайность – быть добрым дурачком, другая – прийти к знанию, не испытав никаких чувств. Буддизм предпочитает срединный путь развития и того, и другого. Высшая мудрость состоит в том, чтобы понимать, что все видимые вещи являются незавершенными, непостоянными и не имеют неизменной сущности. Настоящая мудрость – не просто верить словам, а самому испытывать и постигать истину и реальность. Мудрость требует открытого, объективного, незашоренного ума. Следование путем буддиста требует мужества и терпения, гибкости и восприимчивости.</p>
    <span class="heading">Как буддизм может помочь мне?</span><br>
    <p>Буддизм объясняет смысл жизни, объясняет кажущуюся несправедливость и неравенство, царящие в мире, а также предлагает кодекс поведения или стиль жизни, который ведет к истинному счастью.</p>
    <span class="heading">Почему буддизм становится популярным?</span><br>
    <p>Буддизм становится популярным в западных странах по ряду причин. Первая важная причина – то, что он способен ответить на многие вопросы современного материалистического общества. Также в буддизме укоренено глубокое понимание человеческого разума и естественных способов его исцеления, которые выдающиеся психологи по всему миру стали признавать прогрессивными и действенными.</p>
  </div>
    <div>
    <span class="heading">Кем был Будда?</span><br>
    <p>Сиддхартха Гаутама родился в царской семье в Лумбини (на территории современного Непала) в 563 году до нашей эры. В возрасте 29 лет он осознал, что богатство и роскошь не могут дать счастья, и, для того чтобы найти ключ к счастью, занялся изучением различных учений, религий и философских школ своего времени. После шести лет поисков и медитаций он нашел «срединный путь» и достиг просветления. Всю свою жизнь после просветления и до самой смерти в возрасте 80 лет Будда посвятил проповеди принципов буддизма – Дхармы, или Истины.</p>
    <span class="heading">Был ли Будда богом?</span><br>
    <p>Нет, и он сам не называл себя так. Он был человеком, который учил, как обрести путь к просветлению, и делал это исходя из собственного опыта.</p>
    <span class="heading">Чему учил Будда?</span><br>
    <p>Будда учил многим вещам, но основополагающие идеи буддизма изложены в учениях о Четырех благородных истинах и Благородном восьмеричном пути.</p>
    <span class="heading">Как мне стать буддистом?</span><br>
    <p>Учение буддизма может понять и испытать каждый. Буддизм учит, что решение наших проблем находится не где-то далеко, а в нас самих. Будда просил всех своих учеников не просто верить ему на слово, а испытывать его учение на себе. Таким образом, каждый принимает для себя решения сам, а также сам отвечает за свои действия и восприятие вещей. Все это делает буддизм не готовым набором истин, который надо принимать целиком, а скорее учением, которое каждый может изучать и осваивать по-своему.</p>
  </div>
  <div>
    <span class="heading">Поклоняются ли буддисты изображениям?</span><br>
    <p>Время от времени буддисты останавливаются у изображений Будды, но не для того, чтобы поклоняться или просить о чем-либо. Статуя Будды с сострадательной улыбкой и сложенными на коленях руками напоминает нам, что нужно прилагать все усилия для того, чтобы достичь мира и любви внутри себя. Кланяясь статуе, мы выражаем благодарность за учение</p>
    <span class="heading">Существуют ли различные виды буддизма?</span><br>
    <p>Существует много различных видов буддизма, т.к. акценты учения могут меняться от страны к стране под влиянием их культуры и традиций. То, что останется неизменным, – это сущность учения: Дхарма, или Истина.</p>
    <span class="heading">Научен ли буддизм?</span><br>
    <p>Наука – это знание, которое может быть организовано в систему, основанное на наблюдении, проверке фактов и постулировании фундаментальных законов природы. Сама суть буддизма соответствует этому определению, потому что "Четыре благородные истины" могут быть проверены и доказаны кем угодно. Собственно, сам Будда просил своих учеников скорее проверить истинность своего учения, чем принять его, поверив на слово. Буддизм связан больше с пониманием, чем с верой.</p>
    <span class="heading">Являются ли другие религии ложными?</span><br>
    <p>Буддизм как система убеждений толерантен к другим убеждениям и религиям. Буддизм соглашается с моральными принципами других религий, но при этом идет дальше, и открывает нам глобальную цель нашего существования через стремление к мудрости и истинному пониманию природы вещей. Настоящий буддизм очень терпим и не концентрируется на ярлыках вроде «христианский», «мусульманский», «индуистский» или «буддистский»; именно поэтому никогда не было войн во имя буддизма. По этой же причине буддисты не проповедуют и не пытаются обратить других в свою веру, а лишь дают разъяснения тем, кто их ищет.</p>
  </div>
</div>

[ProjectSoft]

Alexander,


https://codepen.io/ProjectSoft/pen/LYBwgzZ

[Alexander]

ProjectSoft, Я так понимаю главное значение в коде там

display: flex;
  flex-direction: row;
  flex-wrap: wrap;

Однако к сожалению не работает, оно не видит либо делает все наизнанку

[Ankhena]

Alexander, в вашем первом коде display два раза.

[Alexander]

Ankhena, Убрал, все так же

[Ankhena]

Alexander, вон же вам выше прямо код дали.
Не получается, показывайте свою песочницу.

[Alexander]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Буддизм</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="apple-touch-icon" sizes="180x180" href="css/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="css/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="css/favicon-16x16.png">
  <link rel="manifest" href="css/site.webmanifest">
  <link rel="mask-icon" href="css/safari-pinned-tab.svg" color="#5bbad5">
  <link rel="shortcut icon" href="css/favicon.ico">
  <meta name="msapplication-TileColor" content="#2b5797">
  <meta name="msapplication-config" content="css/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">
</head>
<body>
  <header>
  <div id="logo" onclick="slowScroll('#top')">
    <img src="css/favicon.ico" class="logo_simple" alt="Lotus">
    <span>Formula Shvidi</span>
  </div>
  <div id="about">
      <a href="#" onclick="slowScroll('#main')" title="Философия">Философия</a>
      <a href="#" onclick="slowScroll('#overview')" title="Храмы">Храмы</a>
      <a href="#" onclick="slowScroll('#faq')" title="Ответы на вопросы">Вопросы/Ответы</a>
    </div>
  </header>

<div id="top">
  <h1>Буддизм</h1>
  <h3>свет во тьме </h3>
</div>

<div id="main">
  <div class="intro">
    <h2>Что такое буддизм?</h2>
    <span>Краткое изложение философской идеи</span>
  </div>
  <div class="text">
    <span>Буддизм – одно из самых демократичных духовных учений. Это усилия, направленные на обретение личностной свободы и полномерное развитие человеческого разума, речи, тела и духа. Буддийская мораль и этика построены на принципах не совершения вреда и умеренности. При этом в человеке воспитывается и развивается чувство нравственности, сосредоточенности и мудрости. А с помощью медитаций буддисты познают механизмы работы ума и причинно-следственные связи между телесными, духовными и психологическими процессами</span>
  </div>
</div>

<div id="overview">
  <h1>Храмы</h1>

  <div class="img">
    <img src="css/Храм Сэйганто дзи.jpg" alt="Храм Сэйганто дзи">
    <span>Храм Сэйганто дзи</span>
  </div>
  <div class="img">
    <img src="css/Храм Ангкор Ват.jpg" alt="Храм Ангкор Ват">
    <span>Храм Ангкор Ват</span>
  </div>
  <div class="img">
    <img src="css/Храм Дасянго.jpg" alt="Храм Дасянго">
    <span>Храм Дасянго</span>
  </div>
  <div class="img">
    <img src="css/Храм Юаньтун.jpg" alt="Храм Юаньтун">
    <span>Храм Юаньтун</span>
  </div>
  </div>

<div id="faq">
  <div>
    <span class="heading">Буддизм – это религия?</span><br>
    <p>Для многих буддизм – это нечто большее, чем религия, скорее философия или стиль жизни. Это философия в смысле «любви к мудрости»</p>
    <span class="heading">Что такое мудрость?</span><br>
    <p>Буддизм учит, что мудрость должна развиваться вместе с состраданием. Одна возможная крайность – быть добрым дурачком, другая – прийти к знанию, не испытав никаких чувств. Буддизм предпочитает срединный путь развития и того, и другого. Высшая мудрость состоит в том, чтобы понимать, что все видимые вещи являются незавершенными, непостоянными и не имеют неизменной сущности. Настоящая мудрость – не просто верить словам, а самому испытывать и постигать истину и реальность. Мудрость требует открытого, объективного, незашоренного ума. Следование путем буддиста требует мужества и терпения, гибкости и восприимчивости.</p>
    <span class="heading">Как буддизм может помочь мне?</span><br>
    <p>Буддизм объясняет смысл жизни, объясняет кажущуюся несправедливость и неравенство, царящие в мире, а также предлагает кодекс поведения или стиль жизни, который ведет к истинному счастью.</p>
    <span class="heading">Почему буддизм становится популярным?</span><br>
    <p>Буддизм становится популярным в западных странах по ряду причин. Первая важная причина – то, что он способен ответить на многие вопросы современного материалистического общества. Также в буддизме укоренено глубокое понимание человеческого разума и естественных способов его исцеления, которые выдающиеся психологи по всему миру стали признавать прогрессивными и действенными.</p>
  </div>
    <div>
    <span class="heading">Кем был Будда?</span><br>
    <p>Сиддхартха Гаутама родился в царской семье в Лумбини (на территории современного Непала) в 563 году до нашей эры. В возрасте 29 лет он осознал, что богатство и роскошь не могут дать счастья, и, для того чтобы найти ключ к счастью, занялся изучением различных учений, религий и философских школ своего времени. После шести лет поисков и медитаций он нашел «срединный путь» и достиг просветления. Всю свою жизнь после просветления и до самой смерти в возрасте 80 лет Будда посвятил проповеди принципов буддизма – Дхармы, или Истины.</p>
    <span class="heading">Был ли Будда богом?</span><br>
    <p>Нет, и он сам не называл себя так. Он был человеком, который учил, как обрести путь к просветлению, и делал это исходя из собственного опыта.</p>
    <span class="heading">Чему учил Будда?</span><br>
    <p>Будда учил многим вещам, но основополагающие идеи буддизма изложены в учениях о Четырех благородных истинах и Благородном восьмеричном пути.</p>
    <span class="heading">Как мне стать буддистом?</span><br>
    <p>Учение буддизма может понять и испытать каждый. Буддизм учит, что решение наших проблем находится не где-то далеко, а в нас самих. Будда просил всех своих учеников не просто верить ему на слово, а испытывать его учение на себе. Таким образом, каждый принимает для себя решения сам, а также сам отвечает за свои действия и восприятие вещей. Все это делает буддизм не готовым набором истин, который надо принимать целиком, а скорее учением, которое каждый может изучать и осваивать по-своему.</p>
  </div>
  <div>
    <span class="heading">Поклоняются ли буддисты изображениям?</span><br>
    <p>Время от времени буддисты останавливаются у изображений Будды, но не для того, чтобы поклоняться или просить о чем-либо. Статуя Будды с сострадательной улыбкой и сложенными на коленях руками напоминает нам, что нужно прилагать все усилия для того, чтобы достичь мира и любви внутри себя. Кланяясь статуе, мы выражаем благодарность за учение</p>
    <span class="heading">Существуют ли различные виды буддизма?</span><br>
    <p>Существует много различных видов буддизма, т.к. акценты учения могут меняться от страны к стране под влиянием их культуры и традиций. То, что останется неизменным, – это сущность учения: Дхарма, или Истина.</p>
    <span class="heading">Научен ли буддизм?</span><br>
    <p>Наука – это знание, которое может быть организовано в систему, основанное на наблюдении, проверке фактов и постулировании фундаментальных законов природы. Сама суть буддизма соответствует этому определению, потому что "Четыре благородные истины" могут быть проверены и доказаны кем угодно. Собственно, сам Будда просил своих учеников скорее проверить истинность своего учения, чем принять его, поверив на слово. Буддизм связан больше с пониманием, чем с верой.</p>
    <span class="heading">Являются ли другие религии ложными?</span><br>
    <p>Буддизм как система убеждений толерантен к другим убеждениям и религиям. Буддизм соглашается с моральными принципами других религий, но при этом идет дальше, и открывает нам глобальную цель нашего существования через стремление к мудрости и истинному пониманию природы вещей. Настоящий буддизм очень терпим и не концентрируется на ярлыках вроде «христианский», «мусульманский», «индуистский» или «буддистский»; именно поэтому никогда не было войн во имя буддизма. По этой же причине буддисты не проповедуют и не пытаются обратить других в свою веру, а лишь дают разъяснения тем, кто их ищет.</p>
  </div>
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script>
    function slowScroll(id) {
      $('html, body').animate({
        scrollTop: $(id).offset().top
      }, 500 );
    }

    $(document).on("scroll", function () {
      if($(window).scrollTop() === 0)
        $("header").removeClass("fixed");
      else
        $("header").attr("class", "fixed");

    });
  </script>
</body>
</html>

[Alexander]

@import url('https://fonts.googleapis.com/css2?family=Lora&family=Roboto:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
    outline: none;
}

body, html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #fafafa;
    font-family: 'Trebuchet MS', Helvetica;
}

/* Шапка сайта */

header {
    width: 100%;
    padding: 10px 0.5% 0px 0.5%;
    background: transparent;
    float: left;
    position: fixed;
}

header #logo{
    color: #fff;
    cursor: pointer;
}

.logo_simple {
    float: left;
    display: block;
    margin-left: 15px;
    line-height: 35px;
}


header #logo span {
    line-height: 45px;
    font-size: 42px;
    font-weight: 700;
    margin-left: 10px;  
    font-family: 'Lora', serif;
    font-weight: bolder;
}

@media (min-width: 701px) {
    #logo {
        float: left;
        width: 30%;
        font-size: 1.4em;
    }
}

#about {
    float: right;
    width: 67%;
 }


@media (max-width: 700px) {
    #logo {
        margin-top: 15px;
        width: 100%;
        font-size: 1.1em;
    }
}

#about {
    float: left;
    width: 70%;
}

#about {
    text-align: center;
    font-size: 1.1em;
    line-height: 50px;
    margin-bottom: 3px;
    margin-top: 0px;
}

#about > a {color: #fff}

#about > a:hover {
    color: #b0b0b0;
    text-decoration: underline;
}

#about > a:not(:last-child) {
    margin-right: 7%;
}

.fixed {
    z-index: 5000;
    background-color: #fff;
    border-bottom: 1px solid silver;
}

header.fixed #logo {
    color: #343434
}
.fixed #about a {color: #343434}
.fixed #about a:hover {color: #7c7c7c}

/* Главный блок на сайте */

#top {
    width: 100%;
    height: 1000px;
    background-image: url(https://celes.club/uploads/posts/2022-05/thumbs/1653286061_29-celes-club-p-buddizm-fon-dlya-prezentatsii-krasivie-37.jpg);
    background-blend-mode: multiply;
    background-color: #2e3a44;
    background-size: cover;
    text-align: center;
    color: #fff;
}   

@media (min-width: 1101px) {
    #top {
        font-size: 3em;
        height: 1000px;
    }
}

@media (max-width: 1000px) and (min-width: 651px) {
    #top {
        font-size: 2em;
        height: 600px;
    }
}

@media (max-width: 650px) {
    #top {
        font-size: 1.3em;
        padding-top: 50%;
        height: 500px;
    }
}


#top h1{
    padding-top: 20%;
}

#top h3{
    color: #ccc
}

#main{
    padding: 100px 20%;
    width: 60%;
    float: left;
    background-color: #f6f6f6;
    border-top: 2px solid silver;
    color: #484848;
    font-size: 1.3em;
}

@media (min-width: 1401px) {
    #main {
    padding: 100px 20%;
    width: 60%;
    }
}

@media (max-width: 1400px) {
    #main {
    padding: 100px 10%;
    width: 80%;
    }
}

@media (max-width: 700px) {
    #main div {
        width: 98%!important;
        margin-bottom: 20px;
    }
}

#main div {
    width: 48%;
    margin-right: 2%;
    float: left;
}

#main h2 {font-size: 3em}
#main span {color: #a0a0a0}

/* Храмы */

#overview {
    float: left;
    background-image: url(https://media.discordapp.net/attachments/990816877691437086/1073720104447135854/Urutty_buddhist_monk_meditating_on_the_mountain_HD_cd213de8-7ac3-4a1f-b275-31cd5fa346bc.png?width=602&height=602);
    background-blend-mode: multiply;
    background-color: #4f1c75;
    background-size: cover;
    background-attachment: fixed;

    padding: 100px 0;
    width: 100%;
    text-align: center;
    color: #fff;
}

#overview h1 {font-size: 4em}

#overview .img {
    float: left;
    width: 30%;
    margin-right: 5%;
    margin-left: 1%;
    margin-top: 50px;
}

#overview .img:nth-child(even) {
    margin-left: 18%;

}

#overview img {
    background: hwb(0 31% 12%);
    padding: 5px;
    border: 2px solid rgb(48, 42, 42);
    float: left;
    width: 100%;
    max-width: 500px;

}

#overview span{
    float: right;
    width: 100%;
    font-size: 2em;
    margin-top: 10px;
    margin-right: 2%;

}

@media (max-width: 700px) {
    #overview .img {
        width: 80%!important;
        margin-right: 0!important;
        margin-left: 10%!important;
    }
}

h1, h2, h3 {
    font-family: 'Brygada1918';
}

/*Вопросы и ответы*/

#faq {
    background-color: #f6f6f6;
    border-top: 2px dashed #e4e3e3;
    width: 100%;
    float: left;
    padding-top: 70px;
    padding-bottom: 70px;
}

#faq div {
    width: 25%;
    margin-left: 6%;
    float: left;
}

@media (min-width: 801px) {
    #faq div {
        width: 25%;
        margin-left: 6%;
        float: left
    }
}

@media (max-width: 800px) {
    #faq div {
        width: 80%;
        margin-left: 10%;
        float: left;
    }
}

#faq .heading {
    font-weight: bold;
    color: #7d7d7d;
    display: block;
    margin-bottom: -0.4em;
    font-size: 2em;
}

#faq p {
    font-family: Arimo, Helvetica, sans-serif;
    color: #4a4a4a;
    font-size: 0,95em;
    margin-bottom: 50px;
}

[Alexander]

Ankhena, Я пробовал все, но не получается. Видимо ошибка где-то, не могу найти

[Ankhena]

Alexander, песочницы это сервисы типа codepen.io, чтобы не компилировать ваш код в голове.
Также не имеет смыл показывать всякий не относящийся к проблеме мусор.
Показывайте в песочнице только один блок и только необходимые стили.

1. Для .faq вообще не задан флекс (зато зачем-то задан флоат)
2. Внутри элементы лежат не россыпью, а разбиты на три div. С какой целью? Так ничего не выйдет, убирайте.

[Alexander]

Ankhena, Вы не поверите, но в песочнице все работает, а на моем сайте - нет.

[Alexander]

Ankhena, https://codepen.io/ipgroy/pen/bGjXQrX

[ProjectSoft]

Alexander, ни кто не виноват, что вы невнимательно читаете код, если вообще читаете.
Я вам дал пример аж с HTML5 разметкой, как у вас должно быть в вашем случае.

[Alexander]

Ankhena, Я специально дал весь код, может где-то проблема выше

[Alexander]

ProjectSoft, Я ни в коем случае никого не обвиняю, я новичок и могу ошибаться.
Я сделал все как надо, задача остается нерешенной.
Вот что выходит

[ProjectSoft]

Alexander, ну вот нафига вам float? Вообще в вашем css коде он зачем?
Вам предлагают верстать флексами. Это на много удобней и без заморочек.
Вы представили код, который не содержит правок, которые вам предложили.
Сделайте, как вам предлагают, выложите в песочницу. Тогда глянем.

PS:
Я не говорю, что вы кого-то обвиняете. Я говорю об умении читать код. Даже если новичок, вы всё-равно должны включать логику и группировать свои мысли и действия. Конечно, вам этому всему нужно учиться. И учиться прислушиваться к советам. Решать для себя выполнять их или нет, или брать только то, что вам нужно.

[Alexander]

https://codepen.io/ipgroy/pen/bGjXQrX
В самой песочнице отображается нормально, но в браузере на моем сайте отображается вот так -

[ProjectSoft]

Зачем заголовки лепите к параграфам? Это совсем ни айс и читается плохо.

но в браузере на моем сайте отображается вот так

Скорее всего вы потеряли закрывающие теги.
Хоть ссылку на сайт дайте ))), чтобы глянуть. Или он у вас локально?

[Alexander]

ProjectSoft, a0778085.xsph.ru
Вот

[ProjectSoft]

Alexander, так и должно быть.

Вы сами задаёте подобные стили.
Если вы ограничили ширину блока, и хотите, чтобы блок был по центру, зачем float: left;? Когда вам нужно выровнить блок по центру. margin-left: auto; margin-right: auto;Ну и padding в разы меньше.

[Alexander]

ProjectSoft,
Вот как должно быть. И left помогало в этом, но я сделал код, который вы скинули, и обломалось.
Как быть то?

[ProjectSoft]

Alexander,

Как быть то?

Я для кого подробно всё описываю!??!
Уходите от float. Он вам абсолютно не нужен. Вы только делаете себе кучу грабель, чтобы на них наступать.
Вам всего то нужно выучить несколько свойств из flex для вёрстки данного сайта.
flex, flex-direction, justify-content, align-items, flex-wrap.
Вот этих пяти свойств уже достаточно для достижения результата.

[Alexander]

ProjectSoft, Вы говорите загадками для незнающего и неразбрирающегося человека в верстки и в программирование в целом. Я знаю как надо работать и решать задачи, однако я задал вопрос тут не просто так, я хотел, чтобы дали четкий код, который исправит ошибки.
На счет float - он был использован и работал четко, но при попытке вставление вашего кода, прозошел сбой и приходиться понять в чем дело.
Float еще остался в других местах, вопрос таков: убирать надо везде и заменять flex-ом?
Вы видели сайт, какими всеми flex-ами надо заполнить сайт, чтобы он работал и не был наизнанку? Будьте добры, ответье четко, либо спасибо вам за помощь, вы помогли мне приблизиться к разгадке.

[ProjectSoft]

На счет float - он был использован и работал четко, но при попытке вставление вашего кода, прозошел сбой и приходиться понять в чем дело.

Всё правильно.
У вас некоторые свойства css, которые задаются для сброса в дефолт заданы не правильно.
Например

* {
	margin: 0;
	padding: 0;
	outline: none;
}

Почему вы для всех элементов страницы устанавливаете margin и padding в 0? outline пока опустим...
Данное правило задаётся для body и то, только margin
Я же в своём коде добавил свойство box-sizing, который чётко даёт понять, что размеры будут задаваться включая border - border-box.
У вас этого не было. Добавили - появилось. Всего несколько незначительных строк, но очень важных.
Мой код вам никак не мешает в плане вёрстки. Он просто показывает, как сделать правильно. Хоть флексами, хоть флоатами. Просто с расчётом ширины блоков в вашем случае нужно плясать, в моём указывать чётко, а главное понятно.
Я понимаю, что вы новичёк... Вам придётся думать и искать ответы. А самый хороший учитель - ни как не копипаст, а именно поиск и подробное изучение. Слова, которые вы пометили как «загадками», вам даны для поиска. Например здесь - https://webref.ru/css

PS:
Кстати, в фреймворках CSS именно с этих строк всё начинается.

[Alexander]

ProjectSoft, Спасибо Вам! Извините за потраченное время.

Answer 1

[Andrew E]

Вот так? )
Бордеры добавил для наглядности.

Comments

[Alexander]

[Alexander]

[Alexander]

[Alexander]

[Andrew E]

Alexander, ну все правильно, если у вас эти абзацы в одном блоке, то так и будет. Если вы хотите чтобы именно абзацы были сеткой, то нужно каждый обернуть в блок. Как я в примере своем и написал.

[Alexander]

Andrew E, Сделал как у вас. Блоки одной высоты, да, однако текст все равно не на одной высоте

[Andrew E]

Alexander, потому что каждый абзац (это заголовок + текст), нужно положить в отдельный блок. Вы так сделали? Кажется что нет. Покажите код

[Andrew E]

Alexander, https://codepen.io/efremandre/pen/KKBObyX?editors=1100



если помог, отметьте решением пожалуйста)

[Andrew E]

Т.е. вы делаете как бы сетку из блоков с блоками, а надо делать сетку из самих блоков по отдельности. Ячейка сетки === одному блоку текста.

И небольшое имхо, я бы заголовки сделал не через <span>. А то как то у вас текст важнее заголовка выходит по семантике. Обернули бы в <h3>, <h4> или хотя бы в <p>

[Alexander]

Andrew E, Спасибо большое! Задача решена!!

[Andrew E]

Alexander, отлично)

[Alexander]

Andrew E, Кстати

Span

использовал специально как заголовок)) Он большой и человек читавший сразу увидит вопрос, после чего перейдет на ответ.

[Andrew E]

Alexander, дело в том, что это не по семантике. Для заголовков лучше использовать теги для заголовков h2-h4.

Размер текста у них по умолчанию больше, так же его можно стилизовать как нужно.