Need help with design
i want the purple background color button to be same as in the image .the width of the line is more than the width of other elements . Whenever i use max-width to give width to the element it does not have any effect on the line i am unable to increase the size of the line . i can do it with using width but then i am unable to give margin. Check out my website"https://talhamustafa1.github.io/Age-Calculator-using-javascript/"
3 Replies
Looks like what you're trying to do is add about 2 * width of the button element to the end of the line. The width of the container should still be relative to the width of the widest element in that container right? Right now that is '--months'.
i just want to increase the width of the <hr>
Main idea is to set a padding instead of margin on the wrapper of the HR, just like you did with the element above and below it.
Then you give the HR a width of 100% and a margin-inline-end of however much space you need at the end of the HR. That way it extends beyond the other elements.
That will make the entire container wider, to prevent the other elements in the container to spread over the full width, you'll probably need to set them to justify-items start