flexbox | Responsive Landing Page made with Flexbox and Media Queries | Style Language library

I am trying to render a grid of large buttons using bootstrap with React.

I have css for hover and focus effects. When user loads the screen, I want one of the buttons loaded as focused. I tried putting autofocus in the div. It does the job, however there is a weird formatting issue. Some thin white border on top of my regular borders renders. I couldn't figure out the exact issue and how not to display this white thin border when a user loads the screen.

My html:

I want to maintain grid layout and I also use flexbox for items because I want to section the title and the content. However the layout changes to fit the content. For example if I put Lorem in side-bar, the bar will expand. How do I fix this, if I want the layout to be the same ratio regardless of the content inside the item?

I have a div with contenteditable="true" and resize: both attributes which has centered text via flexbox

so basically I've been experimenting with CSS recently and I came across something which looked seemed new to me. I usually use units such as em, or px when setting the padding of an element but this time I tried using percentages and to my surprise it worked very differently than the other units.

So I set up three different situations:

I am new to PHP and want to create a simple form as below and want to validate it and submit it only after proper validation.

I am facing issue with phone validation, Phone validates even when i enter characters, i want to validate numbers and + sign for example +1 12345678, +91 1234123123

how can i validate it for phone numbers only..

...

When hoovering the menu element a drop down box shall appear. It does but it is cut. Not sure what is wrong here if the Ul nav list cuts it. The drop down menu has been tested ok but not with this menu. I also tried to change the z-index, but without any result. Can you see anything that can inhibit the drop down menu to show?

I have created an animation of a book with flipping pages. I have used z-index to stack the pages and they are all flipping and displaying in the correct order in the browser UI but inspector is showing something different.

In Firefox, if I right click on page 1 and select inspect it goes to the element for page 4, I also put input elements on the page but on page 1 I can't click and type in it. Some pages do work normally, inspector goes to the right element and I can type in the input but as I flip through the pages, some pages will stop working and others will start working.

This only happens in Firefox, it work exactly as expected in Chrome. Is this a Firefox issue or a problem with my code?

EDIT: https://codesandbox.io/s/my-book-jlrmw?file=/src/components/HelloWorld.vue

Template:

my HTML looks like this. i was trying to make a landing page with a cover and a button. this is my first time working on a real project and stumble upon this problem where the page does not have much elements and just a button

I would like to have a page split in two columns, one of which should overlay over the other one. I haven't been able to do this, so I ask you guys for help. Please ignore the messy svg code, it was copied from inkscape because I wanted to have some clickable elements inside it.

The first/left column (test column) only appears if there is a list to iterate, otherwise it's hidden. The problem with the flexbox solution I have used in the script below is that the second column is offset when the first column appears. I would like it to just appear "above" the page in the area around the black square, without moving any other elements. How would I be able to achieve that?