Semantic-UI Grid setup

[Karandeep Singh]

Hey guys, I was wondering if anyone can help me out because I am unsure of what I did wrong. I am still a student, learning how to web develop, checking out different platforms such as Semantic-UI and I ran into a problem, hopefully someone can assist me on it:

Code: HTML-BODY

<div id="background">

    <img src="assets/images/bg.jpeg" class="stretch" alt="" />

</div>

<i name="home" class="big yellow link corner home icon"></i>

<center><div id="bg" style="width: 1000px">

        <form class="ui large form">

            <div class="ui stacked segment">

                <div class="field">

                    <div class="ui left input">

                        <h2 class="ui image header">

                            <img src="assets/images/overall.png" class="ui mini image" data-wow-iteration="infinite" data-wow-duration="2s"><font size="4" color="orange">&nbsp;&nbsp;<?php echo $row["totalLevel"] ?></font><font size="3" color="orange">/2,277</font>&nbsp;&nbsp;&nbsp;

                             <img src="assets/images/xp.png" class="ui mini image" data-wow-iteration="infinite" data-wow-duration="2s"><font size="4" color="orange">&nbsp;&nbsp;<?php echo $row["totalXP"] ?></font><font size="3" color="orange">/2,277</font>

                        </h2>

                    </div>

                    <div class="ui top attached tabular menu">

                            <a class="item active" data-tab="first">Profile</a>

                            <a class="item" data-tab="second">Skills</a>

                            <a class="item" data-tab="third">Quests</a>

                            <a class="item" data-tab="fourth">Activity</a>

                    </div>

                    <div class="ui bottom attached tab segment active" data-tab="first">

                        <div class="ui three column grid">

                          <div class="column">

                            <div class="ui segment" style="width: 300px">

                                lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd

                            </div>

                          </div>

                          <div class="column">

                            <div class="ui segment" style="width: 300px">

                              lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd

                            </div>

                          </div>

                          <div class="column">

                            <div class="ui segment" style="width: 300px">

                              lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd lkjsadlkjasdkj aslkdjasldjkas dljasdlkjasdklajs lkajsd

                            </div>

                          </div>

                        </div>

                    </div>

                    <div class="ui bottom attached tab segment" data-tab="second">

                      PLAYER'S SKILLS!

                    </div>

                    <div class="ui bottom attached tab segment" data-tab="third">

                      PLAYER'S QUESTS!

                    </div>

                    <div class="ui bottom attached tab segment" data-tab="fourth">

                      PLAYER'S ACTIVITY!

                    </div>

                </div>

            </div>

            <div class="ui error message"></div>

        </form>

        <div class="ui message">Found any problems/bugs? <a href="../community"><font color="orange">Report on Forums</font></a></div>

</div></center>

Now the problem is that it comes out like this:

The way I want it is like this: (Each column should be 300px aligned from one end of the outer div to the other)

I don't know if I am aligning it wrong, and I know i used the center tag but removing that only made them come to the left side, not actually take up their own space. If anyone could possibly point me in the direction to show me how to align them to the red boxes displayed in the above image, that would be great.

Thank You.

[Karandeep Singh]

Well it was my stupidity, I did not notice that my css had something along the lines of: max-width for a column :/