[Solved] Survey form help - Centre submit button independently of CSS grid columns


I am having difficulty placing my submit button in the centre of my survey form. It appears to be confined to the spacing of one of my grid columns. I was thinking that there was perhaps a way to treat it independently of the established grid columns, however, I have yet to figure out how to do this.

Any help would be greatly appreciated!

Link to the form: https://codepen.io/jjeva/full/rbYdQd

You could make the footer div span two columns instead of one. https://cssreference.io/property/grid-column/

Then just center your button with text-align:center;

The other solution would be to put a form content inside another div like this:

  <form id="survey-form">
  <div id="form-container">
    ...form content
    <div class="footer">
      <button id="submit" type="submit">Submit</button>

But keep the footer class container inside form of course. Then apply the css for the #form-container:

.form-container {
   display: grid;
   grid-template-columns: 50% 50%;

And align the content. For me it worked well :wink:

Worked great. Thanks!