Search code examples
javascripthtmlcsslayoutflexbox

problem to position menu icon in the page mobile version

I want and I'm trying position the icon menu to her right edge to be equal to right edge of the image at the bottom. I don't know why, but this icon won't move :P. What's wrong? How can I fix this? Here I am adding what does it look like: enter image description here

I tried to add margin-left: auto on the icon-navigation class, display flex on a container. Then either flex grow on one child so it takes up as much space as possible. And I tried to add justify-content: space-between. But none of these ways doesn't work. If it’s not working, there must be something wrong with the code structure (html or somewhere else a css property is overriding it), but I can't find what is wrong. This is my github: https://github.com/NatKacz99/news-homepage. This is the live page: https://natkacz99.github.io/news-homepage/

Solution

  • There is nothing wrong with your navigation css. On your defined screen width i.e 375px, the menu icon is set to the right of the navbar. Although the issue lies with your .container class. You have set some padding to it and it makes the total width of container exceed the actual width of viewport. This results in a horizontal scroll. Due to this scroll you are unable to visualize that your nav menu icon is actually at its right place.

    You can modify the CSS in style.css as follows, and you should be good to go.

    @media(max-width: 375px) {
/*
* Existing code
*/
.container {
    /*Existing styling*/
    padding-inline: 0px;
}

    PS You should get the out put as follows: enter image description here