Practicing HTML+CSS, having problems with positioning elements - html

Question

I am trying to make a decent layout on my page, I have menu, content section and a footer.
I divided menu/content/section in half and put some text/images there. I am trying to position images in the middle of the div.
* {
box-sizing: border-box;
}
.clear {
clear: both;
}
.mainWidth {
width: 900px;
margin: 0 auto;
border: 2px solid pink;
}
.menu {
width: 100%;
height: 20%;
border: 1px solid blue;
background: grey;
}
#menuLeft {
width: 50%;
float: left;
}
#menuRight {
float: right;
}
#menuRight li {
display: inline-block;
background: red;
}
.content {
border: 1px solid orange;
margin: 150px auto;
}
#contentHalf {
float: left;
width: 50%;
}
#contentHalf2 {
float: right;
}
.footer {
height: 200px;
border: 1px green solid;
background: grey;
}
#footerLeft {
float: left;
width: 50%;
}
#footerRight {
float: right;
}
<div class="menu">
<div class="mainWidth">
<div id="menuLeft">
<img src="images/jez.jpg" width="205px" height="136px">
</div>
<div id="menuRight">
<ul>
<li>Start</li>
<li>O nas</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div class="content">
<div class="mainWidth">
<div id="contentHalf">
<h1>Tytul</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac
eleifend. Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus
erat pretium.
</p>
</div>
<div id="contentHalf2">
<img src="images/bg.jpg" width="213px" height="142px">
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<div class="mainWidth">
<div id="footerLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo erat quis imperdiet porta. In sed nisi magna. Fusce a efficitur magna. Etiam dictum elit in mauris gravida scelerisque. Nulla sit amet fermentum lacus. In tincidunt eu ex ac eleifend.
Donec finibus, magna eu venenatis varius, nisi risus commodo risus, luctus iaculis ante magna id ligula. Cras facilisis diam lorem. Donec egestas ante elit, eu tristique ipsum ornare ac. Ut ullamcorper lacus eget arcu efficitur, eu dapibus erat
pretium.
</p>
</div>
<div id="footerRight">
<img src="images/bg.jpg" width="213px" height="142px">
</div>
</div>
</div>

Answer 1

First at all. if you want 2 containers side by side 50% each, the right way to do it is BOTH floating left and both with 50% width... so to start:
#menuLeft {
width: 50%;
float: left;
}
#menuRight {
width: 50%;
float: left;
}
#contentHalf {
float: left;
width: 50%;
}
#contentHalf2 {
float: left;
width: 50%;
}
#footerLeft {
float: left;
width: 50%;
}
#footerRight {
float: left;
width: 50%;
}
assuming you want the ul of your header at the right, then just add:
#menuRight {
text-align:right;
}
as your li's are already inline-block they will behave as you wish.
same with your images. In this case you want them centered, so just add:
#contentHalf2 {
text-align:center;
}
#footerRight {
text-align:center;
}
is this what you are looking for? FIDDLE

Answer 2

I believe this is what you were trying to achieve: https://jsfiddle.net/u06x2hof/
That is, having the images centred within their respective 'halves'.
Of course the easiest way to centre stuff in CSS is with display : flex; and justify-content : center;, so that's what I've done.