无法在容器类中正确对齐文本?

时间:2019-02-25 20:58:52

标签: html css alignment containers

我正在尝试将容器div中的内容向左对齐(例如padding-left:100px;但是无法找到一种方法。我猜测容器类已经有一个空白和padding?如果可以,我该如何覆盖它们。

  <div class="section1bg">
    <div class="container"> 
      <div class="col-md-6">
        <div class="waldbrandtext1">
           <h2>Waldbrand</h2>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>

        <a data-scroll href="#text2" class="btn btn-warning">Mehr über Waldbrände > </a> 

        <script>
          var scroll = new SmoothScroll('a[href*="#"]', {
            speed: 500,
            speedAsDuration: true
          });
        </script> 

      </div> 
    </div>
  </div>
</div>

那是HTML。我希望通过添加一些填充将容器类向左对齐,但是就像我说的那样,它不起作用。

container{  
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
}

那是我的CSS。忘记容器中的代码{},它还是行不通的。

那我该怎么做?

2 个答案:

答案 0 :(得分:0)

您可以尝试将!important 添加到样式中,如下所示:

.container{  
 width: 100% !important;
 padding-right: 15px !important;
 padding-left: 15px !important;
 margin-right: auto !important;

}

答案 1 :(得分:0)

因为您要尝试将您的班级称为块(<container>)来引用班级,所以您需要在班级名称前加一个点

.container{  
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
}