Cfrgtkky

I have a menu with some items and below I have a container that has the h4 "Recents" and a button "Btn", the "Btn" appears at right aligned horizontally with the last item, its correct. However, the "Recents" is not horizontally aligned with the first item "Item 1" of the menu. Do you know why?

Example: http://jsfiddle.net/fbnoymc2/

HTML:

<div class="container-flex">

    <div class="menu-row row">

        <div class="col">

            <div class="container">

                <ul class="categories_menu">

                    <li class="list-item--hidden">

                        <a href="javascript:void(0)" name="category" id="">Item 1</a>

                    </li>

                    <li class="list-item--hidden">

                        <a href="javascript:void(0)" name="category" id="">Item 2</a>

                    </li>

                    <li class="list-item--hidden">

                        <a href="javascript:void(0)" name="category" id="">Item 3</a>

                    </li>

                    <li class="list-item--hidden">

                        <a href="javascript:void(0)" name="category" id="">Item 4</a>

                    </li>

                    <li class="list-item--hidden">

                        <a href="javascript:void(0)" name="category" id="">Item 5</a>

                    </li>

                    <li class="list-item--hidden">

                        <a href="javascript:void(0)" name="category" id="">Item 6</a>

                    </li>

                    <li class="list-item--hidden">

                        <a href="javascript:void(0)" name="category" id="">Item 7</a>

                    </li>

                    <li><a data-toggle="modal" id="" data-target="" href="">More

                            <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>

                </ul>

            </div>

        </div>

    </div>

</div>



<div class="container py-3">

    <div class="row align-items-center">

        <div class="col">

            <h4 class="display-5 font-weight-bold text-dark">Latest</h4>

        </div>

        <div class="col text-right">

            <a href="" class="btn btn-primary justify-content-end">Btn</a>

        </div>

    </div>

</div>

CSS:

.categories_menu {

  display: -moz-box;

  display: -ms-flexbox;

  display: flex;

  width: 100%;

  -moz-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

  transition: all 100ms ease-out;

}



.categories_menu li {

  -moz-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  border-bottom: 5px solid transparent;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: flex;

  -moz-box-flex: 1;

  -ms-flex: 1 1 auto;

  flex: 1 1 auto;

  height: 59px;

  -moz-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  padding: 10px 0 5px 0;

  border-left: 1px solid #e5f0fa;

}





.categories_menu li:last-child {

  border-right: 1px solid #e5f0fa;

}





.categories_menu a {

  color: #414e5f;

  font-size: 18px;

  font-weight: bold;

  border-bottom: 5px solid transparent;

  text-decoration: none;

}





.menu-row {

  border-bottom: 1px solid #e5f0fa;

}



.menu-row ul {

  margin-bottom: 0;

}

You need to reset the menu list styles to remove any default padding and margin they start with - add the following to the categories_menu:

.categories_menu {

  padding:0;

  margin:0;

}

Updated fiddle

You have by default padding-inline-start: 40px; in ul, menu, dir in your user agent stylesheet you can add padding-left: 0; to .categories_menu.

.categories_menu {

  padding-left: 0; //add this rule

}

My recommendation is to use or create a default reset.css. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything.

Working fiddle