Radio buttons wont align to the left - html

Question

I am trying to create a modal and everything has come along perfectly except my radio buttons. No matter what I try I don't understand how to move them to the left like the other elements in my form. All I want to do is move the radio buttons to the left and align them with the other elements like normal radio buttons.
.feedback-background {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-content {
width: 500px;
height: 600px;
background-color: white;
border-radius: 4px;
padding: 20px;
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
input[type="radio"] {
display: inline;
}
<div class="feedback-background">
<div class="feedback-content">
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form action="">
Name:
<input type="text" placeholder="Name"> E-Mail:
<input type="text" placeholder="E-mail"> What do you think about us?<br>
<textarea rows="6" cols="33" name="comment "></textarea>
<br> How would you rate us ?
<br>
<label>
<input type ="radio " name="rating " id="rating " value="Excellent ">Excellent
<input type ="radio " name="rating " id="rating " value="Very Good ">Very Good
<input type ="radio " name="rating " id="rating " value="Average ">Average
<input type ="radio " name="rating " id="rating " value="Poor ">Poor
<input type ="radio " name="rating " id="rating " value="Extreamly Poor ">Extreamly Poor
</label>
<br>
<br>
SUBMIT
</form>
</div>
</div>
Here's the fiddle: https://jsfiddle.net/dcag0167/2/

Answer 1

Theres a lot of work an little bugs in your code. I will focus on the radio buttons. 2 main errors.
1- You are setting the radio buttons width to 50% with:
input {
width: 50%;
display: block;
margin: 10px 0px;
}
Solution comes to reset it in its own style
input[type="radio"]{
width: auto;
display: inline;
}
2- You are making all your text and radio buttons to just one label tag. This is not a good pratice. We can set on label for each radio button and text. An by adding its display to block, they will align.
label {
display: block;
}
Hope this helps :>
.feedback-background{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-content{
width: 500px;
height: 600px;
background-color: white;
border-radius: 4px;
padding: 20px;
}
input {
width: 50%;
display: block;
margin: 10px 0px;
}
label {
display: block;
}
input[type="radio"]{
width: auto;
display: inline;
}
<div class="feedback-background">
<div class="feedback-content">
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
<form action="">
Name:
<input type="text" placeholder="Name">
E-Mail:
<input type="text" placeholder="E-mail">
What do you think about us?<br>
<textarea rows="6" cols="33" "name="comment"></textarea>
<br>
How would you rate us?
<br>
<label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
<label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
<label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
<label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
<label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label>
<br>
<br>
SUBMIT
</form>
</div>
</div>

Answer 2

First, remove the entire input css styles and just keep one style.
Next, I changed your HTML to include a <label> for each radio button. That way, you can also click the <label> to have the radio button clicked. The for="" is the trick there.
Finally, Surround each group of ratings in a <div class="ratings"> so they can all belong to their own group with a shared style.
.feedback-background {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.feedback-content {
width: 500px;
height: 600px;
background-color: white;
border-radius: 4px;
padding: 20px;
}
.ratings {
margin: 10px 0px;
}
<div class="feedback-background">
<div class="feedback-content">
<img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;" />
<form action="">
Name:
<input type="text" placeholder="Name"> E-Mail:
<input type="text" placeholder="E-mail"> What do you think about us?<br>
<textarea rows="6" cols="33" name="comment"></textarea>
<br> How would you rate us ?
<br>
<div class="ratings">
<input type="radio" name="rating" id="ExcellentRating" value="Excellent">
<label for="ExcellentRating">Excellent</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="VeryGoodRating" value="Very Good">
<label for="VerGoodRating">Very Good</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="AverageRating" value="Average">
<label for="AverageRating">Average</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="PoorRating" value="Poor">
<label for="PoorRating">Poor</label>
</div>
<div class="ratings">
<input type="radio" name="rating" id="ExtremelyPoorRating" value="Extremely Poor">
<label for="ExtremelyPoorRating">Extremely Poor</label>
</div>
<br>
<br>
SUBMIT
</form>
</div>
</div>