Centering

[theos71901143]

Hello, this is probably are really simple question, but I cant for the life of me figure out how to center this specific thing in my website. Ive tried going into the CSS styles and choosing text-center, but nothing seems to do it, its really annoying.

This is my site: theosparks.co.uk

in the 'Me' section, the heading just does not want to center, any ideas? The same thing happens with the 'around the web' section at the bottom, the links are not centred and they are aligned to the left. How do I fix these issues?

Any suggestions would be much appreciated, thank you,

Theo.

[ALsp]

Hi Theos,

Despite the coding errors on your page, the headings still seem to center, but the overall problem is that you are not a coder, yet you are using Bootstrap to lay out your page. You have several tag errors, which will cause various levels of problems in different browsers. Bootstrap is a fumy thing. It really should not be used unless you understand the code and how it works, but then f you do understand it, and still use it, then you have other issues which I won't really get into here.

The best suggestion I can give you is to use Chrome developer tools (press F12 in Chrome) and locate the code errors. Fix them, then see if the page behaves closer to what you would like.

[Nancy OShea]

The ME heading looks centered to me.  Which browser are you using? 

[theos71901143]

sorry, not the 'me' heading, its the part where it says animator/explorer, any ideas on how to fix it?

Yeah I want to learn more about coding, just doing this thing has sparked my interest in the skill, I will hopefully be taking some kind of IT course in the future, but for now I just want this website to run nicely.

[Trisha63026]

Look just above your last update

[theos71901143]

thanks nancy, will try it out in a bit, just having my tea

[Nancy OShea]

You still have over 170 code validation errors that need attention.  Code errors cause rendering problems in some browsers more than others.  Endeavor to work with clean code and you'll have fewer problems.

Showing results for http://theosparks.co.uk/ - Nu Html Checker

[Trisha63026]

element {

}

In your CSS

.about_me h3 {

    display: inline-block;

if you remove the display: inline-block your header will display centered.

[theos71901143]

Thank you Nancy, that did he trick

Do you know whats wrong with my links at the bottom? for some reason their still not centred.

When thats done, that will be all I need to fix my site

[Nancy OShea]

If you mean the social media icons in your footer, they look centered to me.

theos71901143  wrote

When that's done, that will be all I need to fix my site

No.  You must also fix the code errors and do something about page performance because it's slower than a sloth.

[osgood_]

theos71901143  wrote

Thank you Nancy, that did he trick

Do you know whats wrong with my links at the bottom? for some reason their still not centred.

When thats done, that will be all I need to fix my site

There is no need for all those redundant containers in your footer html code. All you need is a simple structure as below:

<!-- Footer -->

<footer class="footer">

<h3>Around the Web</h3>

<ul class="list-inline">

<li>

<a href="http://theosphonedoodles.tumblr.com/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-tumblr"></i></a>

</li>

<li>

<a href="https://twitter.com/theo1231231" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>

</li>

<li>

<a href="https://vimeo.com/user14724352" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-vimeo"></i></a> 

</li>

<li>

<a href="https://www.facebook.com/Theosanimations/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>

</li>

<li>

<a href="https://www.youtube.com/channel/UCIduYBO6MroCtfNMzeEjHDg" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-youtube"></i></a>

</li>

</ul>

</footer>

Plus a couple of css selectors:

.footer {

background-color: #2b3e51;

padding: 50px 0;

}

.list-inline {

text-align: center;

}

So find the code below in your current page and replace it with the above html code and include the css selectors, then your social media icons will be perfectly centered.

<!-- Footer -->

   <footer class="text-center">

   <div class="footer-above">

   <div class="container">

   <div class="row">

   <div class="footer-col col-md-4">

   <h3> </h3>

   </div>

   <div class="footer-col col-md-4">

   <h3>Around the Web</h3>

   <ul class="list-inline">

   <li>

   <a href="http://theosphonedoodles.tumblr.com/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-tumblr"></i></a>

   </li>

   <li>

   <a href="https://twitter.com/theo1231231" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>

   </li>

   <li>

   <a href="https://vimeo.com/user14724352" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-vimeo"></i></a> 

   </li>

   <li>

   <a href="https://www.facebook.com/Theosanimations/" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>

   </li>

   <li>

   <a href="https://www.youtube.com/channel/UCIduYBO6MroCtfNMzeEjHDg" target="new" class="btn-social btn-outline"><i class="fa fa-fw fa-youtube"></i></a>

   </li>

   </ul>

   </div>

   </div>

   </div>

   </div>

   <div class="footer-below">

   <div class="container">

   <div class="row"></div>

   </div>

   </div>

   </footer>

[theos71901143]

Sorry, I cant figure out where to put the css selectors? Thank you.

[osgood_ · Accepted solution]

theos71901143  wrote

Sorry, I cant figure out where to put the css selectors? Thank you.

Include them at the end of your freelancer.css file.

.footer {

background-color: #2b3e51;

padding: 50px 0;

}

.list-inline {

text-align: center;

}