Cannot adjust padding of elements of inner CSS Grid in style sheet but works inline-CodePudding

So I am testing on CSS Grid, I have made a 4 column grid and in one of the rows I added a 3 column grid. I am having trouble having the elements of the inner grid fill out.

Changing the style="padding:0px" of the InnerGrid1 div works, but if i add that same line of styling in the dedicated CSS section it does not respond. This tells me that I am over-writing something in my inline css but i would like to know what it is

This is all my code

  <head>
    <style>
      * {
        text-align: center;
      }

      .MainGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      .MainGrid > div {
        padding: 1em;
        grid-gap: 1em;
        border-style: solid;
      }

      .Unchangeables {
        background-color: rgb(121, 212, 248);
      }

      .Header {
        grid-column: 1/5;
      }
      .Gridtitle {
        grid-column: 1/5;
        background-color: rgb(121, 212, 248);
      }

      .QR {
        grid-column: span 2;
        grid-row: span 2;
      }

      .PicQR {
        grid-row: span 2;
        background-color: rgb(121, 212, 248);
      }

      .TypeOfAccountText {
        grid-column: 1/4;
        border-style: solid;
      }

      .Footer {
        grid-column: 1/5;
      }

      .AccountName {
        grid-column: 2/4;
      }

      .PictureUpload {
        grid-row: span 6;
      }

      .CivilIDEntry {
        grid-column: span 2;
      }

      .NationalityEntry {
        grid-column: span 2;
      }

      .AddressEntry {
        grid-column: span 2;
      }
      .DOBEntry {
        grid-column: span 2;
      }

      .MovementEntry {
        grid-column: span 2;
      }

      .TextOrQrCodeEntry {
        grid-column: span 3;
      }

      .JudgementText {
        grid-column: span 3;
      }

      .Tweet {
        border-style: solid;
      }

      .TypeOfActivity {
        border-style: solid;
      }

      .InnerGrid1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column: span 2;
      }
      .InnerGrid1 > div {
        border-style: solid;
        padding: 1px;
      }
    </style>
  </head>

  <body>
    <div >
      <div >HEADER IMAGE HERE</div>

      <div >
        بطاقة طلب مرئيات لمنشور في موقع للتواصل الإجتماعي
      </div>

      <div >*******@</div>
      <div >إسم الحساب</div>
      <div >Twitter</div>
      <div >الموقع</div>

      <span contenteditable="true" >نوع النشاط</span>
      <div >Pic-QR CODE</div>
      <div >صورة المنشور/ التغريدة</div>
      <span  contenteditable="true">تغريد</span>

      <span contenteditable="true" >***text***</span>
      <div >طبيعة نشاط الحساب</div>
      <div>صورة شخصية</div>
      <div >********</div>
      <div >إسم صاحب الحساب</div>
      <div >BIG PICTURE</div>
      <div >*****25</div>
      <div >الرقم المدني</div>
      <div >كويتي الجنسية / إسم الأم / خزنة مسير</div>
      <div >الجنسية</div>
      <div >٥٦ سنة مواليد 1966/10/18</div>
      <div >العمر</div>

      <div >
        <span contenteditable="true">مدرس</span>
        <div >الحالة الوظيفية</div>
        <span contenteditable="true">متزوج </span>
      </div>
      <!--End of InnerGrid1-->
      <div >الحالة الاجتماعية</div>
      <div >
        صليبيخات، قطعة (*) جادة (*) منزل (*) <br />
        هاتف رقم *******
      </div>
      <div >العنوان</div>
      <div >
        داخل البلاد قادما من إيران بتاريخ ٢٣/٧/ ٢٠٢١و لديه الكثير من الحركة إلي
        العراق و إيران
      </div>
      <div >الحركة</div>
      <div >Text or qr code</div>
      <div >السوابق الجنائية</div>
      <div >text</div>
      <div >الرأي القانوني</div>

      <div >Footer</div>
    </div>
    <!--MainGrid End-->
  </body>
</html>

the class "InnerGrid1" is the grid within the "MainGrid" class.

This is how it looks like with the problem:

This is how it looks like after its fixed by adding "padding:0px" inline css at InnerGrid1 div:

CodePudding user response：

The problem was that I had set a padding already for all divs within my "MainGrid" class here:

.MainGrid > div {
        padding: 1em;
        grid-gap: 1em;
        border-style: solid;
      }

CodePudding user response：

Remove padding from Maingrid class and give to Unchangeables class.

* {
            text-align: center;
        }
        
        .MainGrid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }
        
        .MainGrid>div {
            grid-gap: 1em;
            border-style: solid;
        }
        
        .Unchangeables {
            padding: 1rem;
            background-color: rgb(121, 212, 248);
        }
        
        .Unchangeables {
        }
        
        .Header {
            grid-column: 1/5;
        }
        
        .Gridtitle {
            grid-column: 1/5;
            background-color: rgb(121, 212, 248);
        }
        
        .QR {
            grid-column: span 2;
            grid-row: span 2;
        }
        
        .PicQR {
            grid-row: span 2;
            background-color: rgb(121, 212, 248);
        }
        
        .TypeOfAccountText {
            grid-column: 1/4;
            border-style: solid;
        }
        
        .Footer {
            grid-column: 1/5;
        }
        
        .AccountName {
            grid-column: 2/4;
        }
        
        .PictureUpload {
            grid-row: span 6;
        }
        
        .CivilIDEntry {
            grid-column: span 2;
        }
        
        .NationalityEntry {
            grid-column: span 2;
        }
        
        .AddressEntry {
            grid-column: span 2;
        }
        
        .DOBEntry {
            grid-column: span 2;
        }
        
        .MovementEntry {
            grid-column: span 2;
        }
        
        .TextOrQrCodeEntry {
            grid-column: span 3;
        }
        
        .JudgementText {
            grid-column: span 3;
        }
        
        .Tweet {
            border-style: solid;
        }
        
        .TypeOfActivity {
            border-style: solid;
        }
        
        .InnerGrid1 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-column: span 2;
        }
        
        .InnerGrid1>div {
            border-style: solid;
            padding: 1px;
        }

<div >
        <div >HEADER IMAGE HERE</div>

        <div >
            بطاقة طلب مرئيات لمنشور في موقع للتواصل الإجتماعي
        </div>

        <div >*******@</div>
        <div >إسم الحساب</div>
        <div >Twitter</div>
        <div >الموقع</div>

        <span contenteditable="true" >نوع النشاط</span>
        <div >Pic-QR CODE</div>
        <div >صورة المنشور/ التغريدة</div>
        <span  contenteditable="true">تغريد</span>

        <span contenteditable="true" >***text***</span>
        <div >طبيعة نشاط الحساب</div>
        <div>صورة شخصية</div>
        <div >********</div>
        <div >إسم صاحب الحساب</div>
        <div >BIG PICTURE</div>
        <div >*****25</div>
        <div >الرقم المدني</div>
        <div >كويتي الجنسية / إسم الأم / خزنة مسير</div>
        <div >الجنسية</div>
        <div >٥٦ سنة مواليد 1966/10/18</div>
        <div >العمر</div>

        <div >
            <span contenteditable="true">مدرس</span>
            <div >الحالة الوظيفية</div>
            <span contenteditable="true">متزوج </span>
        </div>
        <!--End of InnerGrid1-->
        <div >الحالة الاجتماعية</div>
        <div >
            صليبيخات، قطعة (*) جادة (*) منزل (*) <br /> هاتف رقم *******
        </div>
        <div >العنوان</div>
        <div >
            داخل البلاد قادما من إيران بتاريخ ٢٣/٧/ ٢٠٢١و لديه الكثير من الحركة إلي العراق و إيران
        </div>
        <div >الحركة</div>
        <div >Text or qr code</div>
        <div >السوابق الجنائية</div>
        <div >text</div>
        <div >الرأي القانوني</div>

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

CodePudding user response：

Make it flex and align its items in center using align-items: center;

.Unchangeables {
  display: flex;
  justify-content:center;
  align-items: center;
}