BootStrap Row not aligning

Question

I am using Bootstrap 4 Alpha 5 and I have the following HTML:

<div class="home-content">
    <div class="container">
        <div class="row flex-items-xs-middle">
            <div class="col-md-7">
                <h1 class="site-title text-xs-center text-md-left">
                    <span class="name">I'm Shivam Paw</span>
                    <span class="title">I create beautiful and bespoke websites to fit your needs</span>
                </h1>
            </div>
            <div class="col-md-5">
                <img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw">
            </div>
        </div>
    </div>
</div>

However, if you see the image below then you will see that the content is misaligned to the left. I saw a post on this on SO but it said you have to put the row class in a container which I have already done.

You can see the site live at https://www.shivampaw.com

I looked at the .row CSS which has margin for left and right of -15px. Removing those margins fixed it but I don't think that's how it should be?

are you asking about the Marging in the row class? Yes, bootstrap added it. and depent too of container-fluid and container. . . learn to use the container class. — ccdiego5, Oct 24 '16 at 22:46
very strange behavior. It looks like `margin-right: -15px;` has no effect on your row — mzrnsh, Oct 25 '16 at 00:30

Cengkuru Michael · Answer 1 · 2016-10-24T23:06:53.547

0

If this is what you expect then look at your CSS. This is the line centering your content

.text-xs-center {
    text-align: center!important;
}

This should fix it though

.site-title {
    font-size: 36px;
    color: white;
    font-weight: bold;
    text-align: left !important;
}

edited Oct 24 '16 at 23:06

answered Oct 24 '16 at 23:01

Cengkuru Michael

4,590
1
33
33

Nope, I want the text centered. Look at the position carefully, it isn't centered properly. – Shiv Oct 24 '16 at 23:44

score 0 · Accepted Answer · answered Oct 26 '16 at 07:05

0

Turns out I had some offending CSS in my style.css:

*, img.full-size{
    max-width: 100%;
}

Changing it to:

img.full-size{
    max-width: 100%;
}

Fixed the problem.

answered Oct 26 '16 at 07:05

Shiv

831
1
12
29

BootStrap Row not aligning

2 Answers2