How to achieve this style in css/html?

internal css in html
html style attribute
css stylesheet template
css examples with source code
html style> tag in body
css path in html
css selectors
css colors

I'm currently developing a website and trying to achieve this style:

Where the icons are with a rounded circle(done), icons. But my problems comes with the text. In the image below, we have it with text-align left i guess but everything fits perfectly, the spaces between each texts, the align.

But when i try to do the same, this is how it looks:

ignore the right side(i will just copy-paste the left side when ready)

As you guys can see, the text keeps breaking lines and isnt centered as the original image.

Heres the code:

.wrapper {
  display: flex;
  text-align: center;
}

.block {
  width: 50%;
}

.lista-fazemos {
  list-style-type: none!important;
  padding: 0;
  margin: 0;
  text-align: right;
}

.circle {
  display: inline-block;
  border-radius: 60px;
  border-color: black;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;
  font-size: 20px;
  color: #A52222;
  margin-right: 15px;
}

.homem-fazemos {
  float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<div class="wrapper">
  <div class="block">
    <ul class="lista-fazemos">
      <li>
        <i class="fas fa-wrench circle"></i>
        <strong>Instalação</strong><br> Fazemos instalação de produtos comprados em nossa loja sem custo adicional!
        <br>
      </li>
      <li>
        <i class="fas fa-truck circle"></i>
        <strong>Instalação</strong><br> Mora longe? Sem problemas, temos serviços de entrega que irão te satisfazer! <br>
      </li>
      <li>
        <i class="fas fa-plus circle"></i>
        <strong>Instalação</strong><br>Aqui somos nota + em qualidade! Pode ficar tranquilo, temos os melhores produtos! <br>
      </li>
    </ul>
  </div>
  <div class="block">
    <ul class="lista-fazemos">
      <li>
        <i class="fas fa-wrench circle"></i> Texto texto Texto texto<br>
      </li>
      <li>
        <i class="fas fa-truck circle"></i> texto texto texto texto <br>
      </li>
      <li>
        <i class="fas fa-plus circle"></i> texto texto texto texot <br>
      </li>
    </ul>
  </div>
</div>

If you want to align icons, headings and descriptive paragraphs in a consistent grid-like layout (ordering the sections vertically, then horizontally), a contemporary approach in 2018 is to use CSS Grid.

Working Example:

body {
font-family: arial, helvetica, sans-serif;
}

.contents {
display: grid;
grid-template-rows: repeat(4, 25%);
grid-template-columns: repeat(2, 80px 220px);
grid-row-gap: 6px;
}

.contents i {
display: block;
width: 60px;
margin: 10px;
line-height: 60px;
font-size: 40px;
text-align: center;
color: rgb(255, 0, 0);
border: 3px solid rgb(255, 0, 0);
border-radius: 50%;
}

.contents div {
width: 208px;
padding: 0 6px;
background-color: rgb(227, 227, 227);
}

h2, p {
max-width: 220px;
}

h2 {
margin-bottom: 2px;
font-size: 12px;
line-height: 12px;
}

p {
margin-top: 0;
font-size: 10px;
}

.heading-2 {
grid-area: 2 / 2 / 3 / 3;
}

.heading-3 {
grid-area: 3 / 2 / 4 / 3;
}

.heading-4 {
grid-area: 4 / 2 / 5 / 3;
}

.heading-5 {
grid-area: 1 / 4 / 2 / 5;
}

.heading-6 {
grid-area: 2 / 4 / 3 / 5;
}

.heading-7 {
grid-area: 3 / 4 / 4 / 5;
}

.heading-8 {
grid-area: 4 / 4 / 5 / 5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="contents">
<i class="fa fa-wrench"></i>
<div class="heading-1">
<h2>Heading One</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-wrench"></i>
<div class="heading-2">
<h2>Heading Two</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-truck"></i>
<div class="heading-3">
<h2>Heading Three</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-truck"></i>
<div class="heading-4">
<h2>Heading Four</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-5">
<h2>Heading Five</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-6">
<h2>Heading Six</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-7">
<h2>Heading Seven</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-8">
<h2>Heading Eight</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

</div>

How Can I Override Style Info from a CSS Class in the Body of a , Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  i'm creating a HTML page with Bootstrap 4 from an image. This is the image: But i have no idea how to get this style with flexbox. This is what i have done so far html:

ul {
  list-style: none
}

li {
  width: 50%;
  float: left;
margin-bottom:2%;
}
.circle {
  display: inline-block;
  border-radius: 60px;
  border-color: black;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;
  font-size: 20px;
  color: #A52222;
  margin-right: 15px;
}

   .col-container {
  display: table;
  /* Make the container element behave like a table */
  width: 100%;
  /* Set full-width to expand the whole page */
}

.col {
  vertical-align: top;
  text-align: top;
  display: table-cell;

  /* Make elements inside the container behave like table cells */
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<ul class="col-container">
  <li>
    <div class="col">
      <i class="fas fa-wrench circle"></i>
    </div>
    <div class="col">
    <strong>Instalação</strong><br> Fazemos instalação de produtos comprados em nossa loja sem custo adicional!
    </div>

  </li>
  <li>
    <div class="col">
      <i class="fas fa-truck circle"></i>
    </div>
    <div class="col">
      <strong>Instalação</strong><br> Mora longe? Sem problemas, temos serviços de entrega que irão te satisfazer!
    </div>

  </li>
  <li>
    <div class="col">
      <i class="fas fa-plus circle"></i>
    </div>
    <div class="col">
      <strong>Instalação</strong><br>Aqui somos nota + em qualidade! Pode ficar tranquilo, temos os melhores produtos!
    </div>

  </li>
   
</ul>

Inline Styles in HTML, When a browser reads a style sheet, it will format the HTML document according to Note: Do not add a space between the property value and the unit (such as  How to remove all the borders of a selectbox? jquery,html,css,drop-down-menu. Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon

Sorry if this is a bit simple, but can you not just change the text-align to left?

.lista-fazemos{
        list-style-type: none!important;
        padding: 0;
        margin: 0;
        text-align: left;
    }

How to change text font in HTML?, Inline CSS usage: how to link CSS to HTML & add style attributes to tags. Make a note to only apply CSS inline styles for testing purposes  We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

HTML style tag, Inline Styles. Inline styles are used to apply the unique style rules to an element, by putting the CSS rules directly into the start tag. It can be  Inline CSS. An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

How to add CSS, Without further ado, let's get started with the Cascading Style Sheets (CSS). Inline styles — Using the style attribute in the HTML start tag. Embedded styles  The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. Each HTML document can contain multiple <style> tags.

Inline CSS Explained: Learn to Add Inline CSS Style, A short guide on when and when not to use inline CSS styles in HTML. Professional web developers do not use inline styles often, but there are times when  With CSS, links can be styled in different ways. Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in. When setting the style for several link states, there are some order rules: The text-decoration property is mostly used to

Comments
  • you want it to be aligned left?
  • Try to add '.lista-fazemos li { text-align: left; }` to css
  • @Nosyara It works but i need more space between the texts, you know? Because if i just text-align left the text still breaking a lot of lines.
  • Play with padding-left margin-left of li . I'm not sure I understand what you mean :-)
  • Just a comment, This forces height on elements and is not responsive to different text lengths
  • The columns are still fixed sizes as: grid-template-columns: repeat(2, 80px 220px);
  • Thanks a lot! This style fits with the project im doing. Thank you again, greetings from Brazil :)
  • This is a code dump. You’re an experienced user, you should be explaining how and why this answers the question
  • @ATomCalledStu I wrote it at 12am last night trying to help before falling asleep, agreed it should have more explanation.
  • Thanks for the explanation too. It will help with my experience. A hug!
  • It works but i need more space between the texts, you know? Because if i just text-align left the text still breaking a lot of lines.
  • I basicly need the text to be longer like the example. Idk if i'm being clear.
  • i.imgur.com/MzzgX01.png See the image. the text breaks 3 lines. What if i need it to be only 2 lines?
  • @CésarN. Please check my awnser below and tell me whether that works for you or not.