Заставить элементы выглядеть точно так же, как мой дизайн, при правильном выравнивании ⇐ CSS

[Anonymous]

Как разместить элементы в заданных контейнерах, чтобы они помещались на экране? Я хочу, чтобы страница моего веб-сайта «зеленые инвестиции» выглядела так, как мой дизайн на холсте на первой картинке ниже. Однако в результате я получил второе изображение под ним




Как видите, тексты появляются в своих контейнерах, но они слишком велики. Однако изображения и их контейнеры слишком велики и слишком сплющены в правой части страницы, в то время как контейнер в самом верху, содержащий основной заголовок «зеленые инвестиции», похоже, не удерживает [заголовок на месте]. Весь макет сдавлен неправильно и увеличен слишком неравномерно. Ниже приведен конкретный HTML-код для элементов, над которыми я работаю.

Код: Выделить всё

Green Investment




Green Investment


Profit from the green revolution
Reduce your carbon foot print and make a positive impact on the environment and the community by investing in clean and green energy. Bali offers untaped green investment potential as the booming tourism industry draws an international crowd of  environmentally conscious people to the island who not only want to livre a healthy lifestyle being close to nature but also perserve it

Despite the vast potential of being an ecohub the island’s consciousness towards the environment is poorly managed due to a mentality of  unhygienic lifestyle especially relating to waste disposal.  Passed down from generations, the people of Bali are taught that everything used in their daily life are easily disposed of by dumping them out in nature and in public places.  This sort of mentality exists because their ancestors haver grown accustomed to using everyday items made from natural materialks like wood and plant fiber. However times have changed as people use everyday items that are synthetically made that damage nature. Unfortunately the Balinese have not caught up to this change as they are still stuck with the outdated mindset of their ancestors.

This is where you, the investor come in. You can invest in building green businesses like solar farms, recycling plant, public parks and green spaces to instill a mentality of care for motherr nature. By doing this you will improve the island’s green image and gain more clients in thed process. To get updates on new green investments in Bali and other islands indoinesia, subscribe to our newsletter on the right.

[img]file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/solar%20cells.jpg[/img]

Ниже приведен специальный CSS для конкретного элемента

Код: Выделить всё

.green-investment-title {
width: 100%;
height: 45px;
background-color: #56aeff;
display:flex;
}

.green-content{
display: flex;
flex-direction: row;
}

.green-text {
justify-content: left;
text-align: left;
font-size: 20px;
font-family: Arial;
}

.green-image-container{
width: 200px;
height: 100px;
background-color: #f0f0f0;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

Если вы хотите просмотреть полный код, он находится в моей скрипте JS: моя скрипта JS
как мне убедиться, что элементы выглядят точно так же, как мой дизайн? есть ли инструменты, которые могут помочь?
Я попробовал изменить свой CSS, добавив дополнительные атрибуты, такие как выравнивание содержимого для каждого контейнера, и добавив атрибут text-align: left для текста внутри контейнера и создав изменился размер границ контейнеров, но это не сработало

Подробнее здесь: https://stackoverflow.com/questions/790 ... -alignment