Style won't apply to submit button. How do I override styles on this one?

Tell us what’s happening:
Well, I am close to completing this challenge.Right now I wanna make two things:move all options (checkboxes and regular ones) from center to the left side, and I also want to alterate submit button appearance. Been researching and trying stuff for a few hours to no result but frustration.

Your code so far
https://codepen.io/ma3eab/pen/OJMQNxG?editors=1100

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 OPR/68.0.3618.173.

Challenge: Build a Survey Form

Link to the challenge:

For moving the options to the left side, have you tried looking into flexbox?

I will. Thanks for your reply!

I have checked your code and the main problem is in HTML code coz you have used a lot of wrong syntax and most of the input elements you have written in your code are completely wrong and also use classes instead of using ID’s.
Another thing that i should tell you that you have to work a lot harder on your HTML ,then you should move to the CSS and always try to do things in systematic way.

I have changed the HTML code to and make it more semantic.Apply CSS to it, it will work great.

Are you satisfied with our agents?

Answer few questions to help us impove our services.

  <form class="survey-form"> 
    <div class="survery-container">
      <label class="survey__label" for="First-name">First name</label>
    <input id="name-label" class="name" type="text" required placeholder="Enter your first name">
    
    <label class="survey__label" for="E-mail">E-mail</label>
    <input id="email-label" class=email type="e-mail" required placeholder="Enter your e-mail">
    
    <label class="survey__label" for="phone">Number</label> 
    <input id="phone" class="phone" type="numbers" min="8" max="11" required placeholder="Enter your number">
    </div>

    <h2 class="heading">What kind of mission you assigned to our agent?</h2>
    
   
    <div>
      <input class="shit" id="assassination" name="mission" type="radio">
    <label for="assassination" class="radio__label">Assassination</label>
    </div>
    
    <div>
      <input class="shit" id="bodyguard" name="mission" type="radio">
    <label for="bodyguard" class="radio__label">Bodyguard</label>
    </div>
     
    <div>
      <input class="shit" id="stealing" name="mission" type="radio">
    <label for="stealing" class="radio__label">Stealing intelligence</label>
    </div>
    
    <div>
      <input class="shit" id="investigation" name="mission" type="radio">
    <label for="investigation" class="radio__label">Investigation</label>
    </div>
    <h2 class="heading">How would you describe agent's performance on a mission?</h2>
    
    <div>
     
    <input class="checkbox" id="lousy" name"agent" type="checkbox" value="Caring">
      <label for="lousy" class="checkbox__label">Lousy</label>
    </div>
    
    <div>
     
    <input class="checkbox" id="serious" name"agent" type="checkbox" value="Serious">
       <label for="serious" class="checkbox__label">Serious</label>
    </div>
    
    <div>
      
    <input class="checkbox" id="quick" name"agent" type="checkbox" value="quick">
      <label for="quick" class="checkbox__label">quick</label>
    </div>
    
    <div>
     
    <input class="checkbox" id="gorgeous" name"agent" type="checkbox" value="Gorgeous">
       <label for="gorgeous" class="checkbox__label">Gorgeous</label>
    </div>
    
    <div>
      
    <input class="checkbox" id="skilled" name"agent" type="checkbox" value="Skilled">
      <label for="skilled" class="checkbox__label">Skilled</label>
    </div>
    
    <div>
    <input class="checkbox" id="bold" name"agent" type="checkbox" value="Bold">
      <label for="bold" class="checkbox__label">Bold</label>
    </div>
    <textarea id="txt" cols="30" rows="10" class="message"
        placeholder="Enter your remarks here"></textarea>

    <button type="submit" class="btn">submit</button>

I checked for differences between your code and mine and I have a few questions.
1)I used < form > a lot because it states in almost every user story that I have to use form element. You used < div > instead. Can you please, explain to me why you did that? I am not trying to be rude or questioning your experience, I am simply newbie who tries his best in understanding basics.

User Story #16: Inside the form element, I am presented with a button with id="submit" to submit all my inputs.

  1. You also used this at very beginning < form class=“survey-form” >
    Why don’t you closed that < form >? Or did I missed it somewhere?

  2. Seems like you haven’t changed head part and dropdown button. Everything ok with those, right?

See its better to create everything in one form instead you using multiple forms that you did because if you create multiple forms you need to have multiple buttons to submit that because you have to add the button inside the form not outside of it.
1.I closed it at the end.
2.And yeah the dropdown was fine.

Oooooh, I see it now.

Lookin exactly like I wanted it now. Have to re-allign few parts, but I don’t have time for this atm. Will report back when I m done.
Progress so far:

It looks great as it was before and another thing is you should a display of block to the survery__label class, it will look more better.