Search code examples
htmlcsstwitter-bootstrap-3positioncss-position

How can I force the position of the divider, and place logo at a certain location?

Here is what I have now :

enter image description here

I'm struggling trying to move my divider and my book up - maybe 10px.

I've tried to inspect them using dev tool and adjust the padding, and margin, but nothing seems to work.

I'm very curious and clueless right now. I'm not sure why it stopping me at that orange dash line. I need a little push here.

Can someone please tell me what I did wrong here?

Here is my live result: Fiddle

Solution

  • To move everything below the perforated line, change the margin-top attribute of your .tl-left selector. 

    .tl-left{
    margin-top: -35px;
}

    To move only the book image and vertical line do the following:

    #mp-book{
    width: 76px;
    margin-top:-10px;
}

.vertical-line {
    border-left:3px solid silver;
    height:100px;
    text-align: center;
    width:2px;
    margin-left:48px;
    margin-right:25px;
    margin-top:-10px;
}

    Add margin-top:-10px to your #mp-book and .vertical-line selectors.

    https://jsfiddle.net/e9L60rfr/23/