Looking to center a flexibox in the browser window? The code in the following jsfiddle works fine, but it doesn't center the flexibox. When the browser screen changes, the image and text adjust responsively.
<!DOCTYPE html><html lang="en"> <head>
<meta charset="UTF-8>
<title></title>
<style>
#container {
display: flex;
/*width: 1400px;*/
margin: auto;
}
#container .video {
border: 5px solid red;
width: 750px;
max-width: 100%:
}
#container .desc {
background-color: blue;
max-width: 100%;
}
</style> </head> <body>
<div id="container">
<div class="video">
<img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg"
style="max-width: 100%">
</div>
<div class="learn">
<p>
isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.
<p>
</div>
</div> </body></html>
If I uncomment the /width: 1400px;/ line, the flexibox centers properly. However, the image and text will not adjust responsively when the browser screen changes. Any suggestions? Thanks!