How to center an iframe video

[larrycode1]

i can’t find any missing closing curly brace after checking thoroughly…Can you please tell me where it is??

[larrycode1]

Hello I just looked and I can’t find any curly missing brace

[kinome79]

Code pen has an option to analyze your CSS for mistakes under that dropdown arrow next to the gear:

Seems .fa-solid is not properly closed.

Also, what he’s saying is justify-content is meant to be used with a Flex display. If you are using Block display, justify-content doesn’t do anything.

If you want to justify-content, you can set the section to flex. What he was saying to change to BLOCK was your iframe… iframe is an inline element, so if you want to format it like a block to center it, you need to set its display to block. I am having problem centering it though, but did find you still have errors in the HTML as well…

Still seem to have some closing div tags with no opening tag… and around your header and nav sections, they still don’t appear to be closed out in the proper order. Notice in the code block below, you open a div element, then a nav element, but in closing you close the nav, but then close a header before closing the div. That same little dropdown on the HTML section has an analyze for errors, and also formatting so you can make it set the spacing for readability.

       <div class="container">
        <nav id="nav-bar">
           <ul>
             <li><a class="nav-link" href="#features">Features</a>
               </li>
                 <li><a class="nav-link" href= "#how-it-works">How it works</a></li>
                   <li>
                     <a class="nav-link" href= "#pricing">Pricing</a></li>
                        </ul>
                          </nav>
                           </header>
                             </div>

[kinome79]

OK, I understand you’re struggling so I kept at it…it seems you’ve done a lot of copy/paste and in doing so, have ended up with a lot of messy code… its very hard to comb through for us and for you… but heres some things I found.

So, first the HTML, I fixed everything above, you have some html tags in the wrong order, and an extra div closing tag… use the HTML Formatter and HTML Analysis to fix the spacing and see some of the errors. Manually go through and make sure all open tags have appropriate closing tags in the right order.

Next, the CSS… I pointed out that missing closing tag, but using the analizer, seems you’ve copied and pasted a lot of code more than once, so you have a bunch of duplicates. For instance, you have more than one .icon{} section. Use the CSS analysis to also find and elemenate all duplicates and code errors.

Once I did that all that, I was able to set the section to flex, and use the justify content to center the content… you can change the width of the video in the HTML as I mentioned before.

I hope this helps… keeping your code clean, and without errors, is the key to success… one misplaced closing tag or a duplicate CSS selector or missing curly bracket can make a page non-functional, and have weird results. Some of those errors may not be apparent because HTML is designed to function even with errors in the code, but when you can’t get something to center, it can be because your base code has errors.

Please fix all this, and see if that resolves your issues.

[larrycode1]

@kinome79
I read through everything you told me & i have taken note to everything you said…I just analyzed my html & CSS codes and i was able to fix the errors & duplicate tags i have in my codes…Thank you so much for coming through for me and just because i have duplicate codes & missing curly braces that’s why i’ve been stucked for days & won’t pass my challenge but if not for you, i do still be stucked but i greatly appreciate your help & you such a great teacher …You should open a platform where by you’d teach young techies how to code because you definitely a good teacher no doubt about it…Once again thank you so much, i was able to center my iframe video with your explanation…Happy coding!!!