I am having problems with my flexbox container. I have tried searching up my problem but cannot find what it is.
My images in my container are huge and are spilling out of the container.
I have tried using .img { max-width:100% }, width, align-content: flex-start but nothing is working.
Can anybody tell me what I've done wrong?
Also big thanks to everyone for helping me previously and this time again!
body {
background-color: #CCC;
color: black;
font-family: 'Raleway', sans-serif;
font-size: 1em;
display: flex;
flex-direction: column;
border-color: black;
border-style: solid;
border-width: 15px;
margin: 0;
}
.header {
align-items: center;
}
.logo {
display: flex;
font-size: 1.5em;
font-family: 'sans-serif';
color: black;
text-decoration: none;
margin: 80px auto 15px 20%;
}
.nav-bar {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 auto;
justify-content: center;
width: 250px;
font-size: 1em;
}
li .col,
.decor {
text-decoration: none;
color: white;
font-size: 1.2em;
padding: 10px;
}
.col {
list-style: none;
}
ul li a.selected,
.decor:hover {
color: black;
}
.intro {
display: flex;
flex-wrap: wrap;
margin: 35px auto 0 20%;
max-width: 450px;
justify-content: flex-start;
}
#wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 10px auto;
justify-content: center;
background-color: green;
height: 500px;
max-width: 900px;
}
}
#wrapper li {
padding: 5px;
background-color: red;
}<head>
<meta charset="utf-8">
<title>Project of Martin Wong | HTML, CSS and Javascript</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/flexbox.css" rel="stylesheet">
</head>
<body>
<!-- TOP HEADING LOGO AND NAV BAR-->
<header class="header">
<a href="index.html" class="logo">
<h1>Martin Wong</h1>
</a>
<ul class="nav-bar">
<li class="col"> <a href="index.html" class="selected decor">Portfolio</a> </li>
<li class="col"> <a href="aboutme.html" class="decor">About me</a></li>
<li class="col"> <a href="contact.html" class="decor">Contact</a></li>
</ul>
</header>
<!------------------------------------------------------------------------>
<div class="intro">
<h2>Training my skills for the future</h2>
<p>This is my journey to become a web developer. This website will tell my diary of my holiday that I went on in June</p>
</div>
<!--IMAGES IN THE MIDDLE---------------------->
<div class="wrapper">
<section>
<ul id="wrapper">
<li>
<a href="img/bro-and-me.jpg" class="container-image">
<img src="img/bro-and-me.jpg" alt="brother&me" class="img">
<p>A RARE half decent photo of me(right) and my brother(left) in Singapore. Photo taken by my father, And being ruined by mom walking into shot </p>
</a>
</li>
<li>
<a href="img/father.jpg" class="container-image">
<img src="img/father.jpg" alt="father" class="img">
<p>Father telling us a story while mom sniggers at a inside joke about our father</p>
</a>
</li>
<li>
<a href="img/mom.jpg" class="container-image">
<img src="img/mom.jpg" alt="mom" class="img">
<p>Mom feeling unwell on the journey to the big Buddha</p>
</a>
</li>
<li>
<a href="img/Park-plaza.jpg" class="container-image">
<img src="img/Park-plaza.jpg" alt="parkplaza" class="img">
<p>Park Plaza foodcourt. Cheap, delicious and quick-serving meals where I have many memories of</p>
</a>
</li>
</ul>
</section>
</div>
