ASP Styling isn't working properly

Question

I'm working on an ASP site for the company I work at. It's about adding money saving or earning activities to an overview that one of the directors can look at.

Currently though I have some styling issues, using bootstrap here.

I believe I used to have this issue once but how I solved it escapes me. I can't center all the elements and I can't make the input boxes connect with the addons on the right side as is seen in the picture.

<div class="container body-content" style="padding-top: 15px;">
    <div class="container" align="center">
        <div class="col-lg-8">
            <div class="row">
                <h2>Abstract</h2>
                <div class="form-group">
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">FYE</span>
                        <select class="form-control required" id="new-activity-fye-dropdown">
                            <option value="1">On Track</option>
                            <option value="2">Issue</option>
                            <option value="3">Behind</option>
                        </select>
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Full Year Expectation of the Activity. Usually On Track on creation.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Activity Name</span>
                        <input type="text" class="form-control required" id="new-activity-modal-name-field"
                            aria-describedby="new-activity-modal-name-field" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The Name of the Activity. This name appears in the Activity Overview.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Responsible</span>
                        <input type="text" class="form-control required" id="new-activity-modal-responsible-field"
                            aria-describedby="new-activity-modal-responsible-field" disabled />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The responsible person for this activity. This it the go-to person for questions, progress and reports.">
                            <b>?</b>
                        </span>
                    </div>
                    <!-- TODO: Find an automatic way to make this dropdown -->
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Department</span>
                        <select class="form-control required" id="new-activity-modal-department-dropdown">
                            <!-- Handled in content-controller: CreateNewActivityDepartmentDropdown() -->
                        </select>
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The department this activity belongs to.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">Start Time</span>
                        <input class="form-control" type="text" id="new-activity-modal-datepicker-start" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The start of the activity. Usually today's date.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">End Time</span>
                        <input class="form-control" type="text" id="new-activity-modal-datepicker-end" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="The estimated end of the activity.">
                            <b>?</b>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row">
                <h2>Description</h2>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">Upload a thorough description explaining the Activity.</span>
                    </div>

                </div>
            </div>
            <div class="row">
                <h2>Estimation</h2>
                <div class="form-group">
                    <div class="input-group" style="padding-bottom: 10px;">
                        <span id="add-addon-styling" class="input-group-addon">AX Account Number(s)</span>
                        <input type="text" class="form-control required" id="new-activity-modal-ax-account-numbers-field"
                            aria-describedby="new-activity-modal-ax-account-numbers-field" />
                        <span class="input-group-addon" data-toggle="tooltip" data-placement="top"
                            title="AX Account number associated with the activity. 
                                              Multiple accounts can be added separated by commas.">
                            <b>?</b>
                        </span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">Upload the estimation calculations for the Activity.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I feel that my HTML is fairly normal but I have a hard time applying styles from CSS files in ASP in the first place.

How would I make the addons on the right side connect with the input fields?

UPDATE

It appears that the problem was inside a default generated file called Site.css. It had the following in it:

input,
select,
textarea {
    max-width: 280px;
}

Commenting that out solves the problem.

Answer 1

Since I don't know how exactly ASP's css structure is, here is how i would approach this situation:

use your browser's inspector to check exactly what type of css rule is making the "?" button be all the way to the right, i can only assume it either has a float, or the form has a huge margin on it's right.

once you have found the issue, you could use your browser's inspector further to test out some edits, if it's a margin thing, see how much margin it will actually need, if it's a float issue, see how it will look with float:none

as soon as you've found the solution to the issue, you will need to apply it, to do this add a custom .css file AFTER ASPs css files, this way whatever you write in it will overwrite any existing rules.

add the fixes to this new file and you should be done.

Answer 2

There must be something elsewhere on the page that is breaking the style of the select boxes, because when I view your snippet in codepen, in both Chrome and IE11, the select boxes do stretch to the question mark boxes at the right:

codepen.io/anon/pen/pgVoQg

btw, inline styles should usually be avoided where possible