Css 如何在它们之间添加空格并使文本保持同一行

我怎样才能在这两幅图像之间添加一个空格，而不让文本在页面中心断裂？这是一个大学项目，我以前从未编程过。 我实际上不知道这个模板上发生了什么，我必须编辑。。我只需要添加一个人的照片在图片圈（我知道如何）和一个文本的审查，但图像不断起飞位置和文本在中间休息。

/*
模板化的地平线
templated.co@templatedco
根据知识共享署名3.0许可证（templated.co/license）免费发布
*/
@导入url（“font awesome.min.css”）；
@导入url（“http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");
/*基本的*/
}
身体{
背景：#222833；
}
身体，
输入，
选择，
文本区{
颜色：#555555；
字体系列：“Raleway”，无衬线；
字号：13pt；
字体大小：300；
线高：1.75em；
}
a{
颜色：#3ac984；
文字装饰：下划线；
}
a:悬停{
文字装饰：无；
}
坚强的
b{
字号：700；
}
相对长度单位，
我{
字体：斜体；
}
P
ul，
ol,，
dl，
桌子
大宗报价{
边际：0.02米0；
}
h1，
h2，
h3，
h4，
h5，
h6{
颜色：继承；
字号：700；
线高：1.75em；
边缘底部：1米；
}
H1A，
h2a，
h3 a，
h4 a，
h5a,，
h6 a{
颜色：继承；
文字装饰：无；
}
氢{
字号：1.5em；
}
h3{
字号：1.25em；
}
潜艇{
字号：0.8em；
位置：相对位置；
顶部：0.5em；
}
苏普{
字号：0.8em；
位置：相对位置；
顶部：-0.5em；
}
人力资源{
边框顶部：实心1px#8888888；
边界：0；
边缘底部：1.5em；
}
大宗报价{
左边框：实心0.5em#8888888；
字体：斜体；
填充：1米0 1米2米；
}
第3.1节特别，
第1条特别{
文本对齐：居中；
}
少校{
垫底：4em；
}
收割台h2{
保证金：0；
填充：0；
字号：3em；
字号：600；
}
标题.署名{
字号：1.6em；
}
页脚>：最后一个子项{
页边距底部：0；
}
大调页脚{
垫面：3em；
}
/*形式*/
输入[type=“text”]，
输入[type=“password”]，
输入[type=“email”]，
文本区{
-moz外观：无；
-webkit外观：无；
-o-外观：无；
-ms外观：无；
外观：无；
背景：无；
边框：实心1px#8888888；
颜色：继承；
显示：块；
大纲：0；
填充：0.75em；
文字装饰：无；
宽度：100%；
}
输入[type=“text”]：焦点，
输入[type=“password”]：焦点，
输入[type=“email”]：焦点，
文本区域：焦点{
边框颜色：#3ac984；
}
输入[type=“text”]，
输入[type=“password”]，
输入[type=“email”]{
线高：1米；
}
：-webkit输入占位符{
颜色：继承；
不透明度：0.5；
位置：相对位置；
顶部：3px；
}
：-moz占位符{
颜色：继承；
不透明度：0.5；
}
：-moz占位符{
颜色：继承；
不透明度：0.5；
}
：-ms输入占位符{
颜色：继承；
不透明度：0.5；
}
.公式化占位符{
颜色：rgba（85,85,85,0.5）！重要；
}
/*形象*/
.形象{
边界：0；
位置：相对位置；
}
.image.fit{
显示：块；
}
.image.fit img{
显示：块；
宽度：100%；
}
.图像.特征{
显示：块；
边际：0.02米0；
}
.image.feature img{
显示：块；
宽度：100%；
}
.image.feature2{
显示：块；
边际：0.5em-0；
}
.image.feature2图像{
显示：块；
宽度：100%；
边界半径：50%；
宽度：200px；
高度：200px；
浮动：左边缘40px；
}
/*图标*/
.图标{
位置：相对位置；
}
.图标：之前{
内容：“；
-moz osx字体平滑：灰度；
-webkit字体平滑：抗锯齿；
字体系列：Fontsome；
字体风格：普通；
字体大小：正常；
文本转换：无！重要；
}
.icon>.label{
显示：无；
}
/*列表*/
默认值{
列表样式：十进制；
左侧填充：1.25em；
}
李先生{
左侧填充：0.25em；
}
保险商实验室{
保证金：0；
填充：0；
}
违约{
列表样式：无；
}
ul.li{
显示：块；
填充：0.60em0；
边框顶部：1px实心；
边框颜色：rgba（192,192,192,0.15）；
}
ul.default>：第一个孩子{
填充顶部：0；
边界顶部：无；
}
ul图标{
游标：默认值；
}
李先生{
显示：内联块；
线高：1米；
左侧填充：0.5em；
}
李：第一个孩子{
左侧填充：0；
}
行动{
游标：默认值；
}
行动：最后一个孩子{
页边距底部：0；
}
李先生{
显示：内联块；
填充：01.5em；
}
李：第一个孩子{
填充：0；
}
垂直力{
显示：块；
填充：1.5em 0；
}
ul.actions.li：第一个孩子{
填充：0；
}
联系李{
填充：1.05em0；
边框顶部：1px实心；
边框颜色：rgba（192,192,192,0.15）；
}
ul.contact li>span{
显示：内联块；
}
ul.联系地址：，
ul.联系li.mail，
电话联系李{
浮动：左；
宽度：100px；
字号：600；
}
ul.联系人>：第一个孩子{
填充顶部：0；
边界顶部：无；
}
李先生{
明确：两者皆有；
显示：块；
垫面：3em；
}
ul.style>：第一个孩子{
填充顶部：0；
}
ul样式h3{
显示：块；
保证金：0；
垫底：0.50em；
字体大小：1.1米；
字号：700；
颜色：#404040；
}
ul.style.fa{
浮动：左；
显示：内联块；
宽度：80px；
高度：80px；
右边距：1米；
背景：3ac984；
线高：80px；
文本对齐：居中；
边界半径：10px；
字号：2em；
颜色：白色；
}
保险单{
列表样式：无；
}
李先生{
显示：块；
填充：0.60em0；
边框顶部：1px实心；
边框颜色：红色；
}
ul.list>：第一个孩子{
填充顶部：0；
边界顶部：无；
}
/*桌子*/
桌子{
宽度：100%；
}
table.default{
宽度：100%；
}
表1.1默认的tbody tr{
边框底部：实心1px#8888888；
}
表1.1默认td{
填充：0.5em 1em 0.5em 1em；
}
表1.1默认值th{
字号：700；
填充：0.5em 1em 0.5em 1em；
文本对齐：左对齐；
}
表1.4默认THAD{
背景：#555555；
颜色：#fff；
}
/*钮扣*/
输入[type=“submit”]，
输入[type=“reset”]，
输入[type=“按钮
.4u p {
  white-space: nowrap;
}

.4u{
  padding: 0.23em;
}

.4u{
  margin: 0.23em;
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.flex-item + .flex-item {
  margin-top: 30px;
}

.image.feature2 {
  display: block;
  margin: 0 0 7em 0;
}


<div class="row no-collapse-1">
  <div class="flex">
    <section class="flex-item">
      <a  class="image feature2"><img 
src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left" =""></a>
  <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>

<section class="flex-item">
  <a  class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
  <p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>