Html 文本对齐在我有一列后不起作用

在“我的技能”部分，我想将右侧的技能标题对齐，在进度条旁边，如中所示

但是一旦我有了一个专栏，文本对齐就停止工作了

这是密码笔：

HTML

---

您的主题正在覆盖

文本对齐：右在css的第1023行（在媒体查询中）。因此，当浏览器宽度低于768px时，文本将向左对齐

@media (max-width: 768px){
   .skilltitle {
       text-align: left;
   }
}

删除媒体查询中的
.skilltitle{text align:left；}
，这样它就不会覆盖
text align:right。现在，当您有一列时，您的文本应该右对齐
 
更新
Updated 

1. add nopadding class beside col-md-8 like below markup for all skills and add below css to override the default column padding.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Remove the padding of progress class:
.progress {

    /* margin-left: 20px; */ remove this and check
}


    <div class="row">

      <div class="col-md-8 nopadding">
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
          </div>
        </div>
      </div>
     <div class="col-md-2 skilltitle">Photoshop</div>
    </div>

1.在col-md-8旁边添加nopadding类，如下面的所有技能标记，并在css下面添加，以覆盖默认的列填充。
没有{
填充：0！重要；
边距：0！重要；
}
删除进度类的填充：
.进展{
/*左边距：20px；*/删除此项并检查
}
Photoshop
我希望文本保持在进度条的左侧，但与原始主题的“技能”部分一样，保持不变。感谢您的更新，但它不起作用。文本保持左对齐，现在被进度条覆盖，如此屏幕截图所示：
@media (max-width: 768px){
   .skilltitle {
       text-align: left;
   }
}

Updated 

1. add nopadding class beside col-md-8 like below markup for all skills and add below css to override the default column padding.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

Remove the padding of progress class:
.progress {

    /* margin-left: 20px; */ remove this and check
}


    <div class="row">

      <div class="col-md-8 nopadding">
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
          </div>
        </div>
      </div>
     <div class="col-md-2 skilltitle">Photoshop</div>
    </div>