mohamedyehia729

i make two div div named by sidebar and layout into container div named by container i make flex box to the container to make the sidebar in left side and the layout in right side .. and that's well done but the problem that the this flex box effect on any element into the layout div ( when make centering don't work until i remove the flex box <!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <title>snapshot</title> <link rel="stylesheet" href="snapshot.css"> <script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="Normalise.css"> </head> <body> <div class="container"> <div class="sidebar"> <nav> <ul> <li><a href="#"></a><i class="fas fa-home"></i></li> <li><a href="#"></a><i class="fas fa-camera-retro"></i></li> <li><a href="#"></a><i class="fas fa-file-alt"></i></li> </ul> </nav> </div> <div class="layout"> <header> <div class="head"><h1>Hey, I'm Snapshot</h1></div> <div class="para"><p>A fully responsive gallery template by TEMPLATED</p></div> <div class="bu"><button>Continue</button></div> </header> <section class="one"> <div class="sent"> <h2>What's New</h2> </div> <div class="images"> <img src="images/fulls/01.jpg" alt=""> <img src="images/fulls/02.jpg" alt=""> <img src="images/fulls/03.jpg" alt=""> <img src="images/fulls/04.jpg" alt=""> <img src="images/fulls/05.jpg" alt=""> <img src="images/fulls/06.jpg" alt=""> </div> <div class="butt"> <button>Full Gallery</button> </div> </section> <section class="two"> <section class="frist"> <h2>About Me</h2> <p>Mus sed interdum nunc dictum rutrum scelerisque erat a parturient condimentum potenti dapibus vestibulum condimentum per tristique porta. Torquent a ut consectetur a vel ullamcorper a commodo a mattis ipsum class quam sed eros vestibulum quisque a eu nulla scelerisque a elementum vestibulum.</p> <p>Aliquet dolor ultricies sem rhoncus dolor ullamcorper pharetra dis condimentum ullamcorper rutrum vehicula id nisi vel aptent orci litora hendrerit penatibus erat ad sit. In a semper velit eleifend a viverra adipiscing a phasellus urna praesent parturient integer ultrices montes parturient suscipit posuere quis aenean. Parturient euismod ultricies commodo arcu elementum suspendisse id dictumst at ut vestibulum conubia quisque a himenaeos dictum proin dis purus integer mollis parturient eros scelerisque dis libero parturient magnis.</p> <h2>Follow Me </h2> <div class="icons"> <i class="fab fa-twitter"></i> <i class="fab fa-facebook-f"></i> <i class="fab fa-instagram"></i> </div> </section> <section class="second"> <h2></h2> <label for="Name">Name</label> <input type="Name"> <label for="Email">Email</label> <input type="Email"> <label for="Message">Message</label> <textarea name="Message" id="" cols="30" rows="10"></textarea> <button>Send Message</button> </section> </section> <footer> <div class="copyright"> <span>&copy;Untitled. All rights reserved. Images Unsplash Design TEMPLATED</span> </div> </footer> </div> </div> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; } .sidebar { background-color:#0D1217; padding: 30px 15px 15px 15px ; } .sidebar ul { list-style: none; } .sidebar ul li a { text-decoration: none; } .sidebar ul li:nth-of-type(1) { padding-bottom: 30px; font-size: 22px; color: rgb(25, 181, 254); } .sidebar ul li { padding-bottom: 30px; font-size: 22px; color: gray; } header{ height: 300px; background: url(images/banner.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } header .head { grid-area: h; } header .para { grid-area: p; } header .bu { grid-area: b; } .one { background-color: goldenrod; } .two { background-color: hotpink; } .frist { background-color: #eee; } .second { background-color: #0c3; } footer { background-color: indigo; }

i write the code grid gap but i want left and right margin to the section of the images not the images

the problem that the images interacted with each other !!

i really try and try to make margin for grid area elements ( 4 pic ) i want to make margin right and margin left with maintaining of centering of elements i want the 4 pic still in center with left margin and right margin ! code of html <div class="image"> <img class="one" src="images/pic03.jpg" alt=""> <img class="two" src="images/pic04.jpg" alt=""> <img class="three" src="images/pic01.jpg" alt=""> <img class="four" src="images/pic05.jpg" alt=""> </div> code of css .image { min-width: 100%; display: grid; grid-template-areas: "o th" "t f" ; } .image .one { display: block; margin-left: auto; margin-right: auto; width: 100%; grid-area: o; } .image .two { display: block; margin-left: auto; margin-right: auto; width: 100%; grid-area: t; } .image .three { display: block; margin-left: auto; margin-right: auto; width: 100%; grid-area: th; } .image .four { display: block; margin-left: auto; margin-right: auto; width: 100%; grid-area: f; }

when i make zoom out , the page is corrupted like this the part with gray color is cut by footer section with black color as background that's the code Heilo.css Heilo.html Normalise.css

i want to show a green border to the input when be active or visited not black as shown ! that's the code https://codepen.io/Mohamedyehia94/pen/oNbeqWY

please write here the correct code !

i try to set linear gradient but i don't know what's the wrong ! margin: 0; width: 100%; height: 590px; background:url(banner.jpg) linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)); background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; top: 0;