Q:

Two column layout with fixed margins in between columns and one column fluid, one fixed?

I am new to html/css and I am stumped trying to set up a two column design where the left column is a column of text that has a fixed width of 300px and the right column is a photo that has a width of 40% of the screen. Also, and this is where I am getting hung up, the two columns should always maintain a fixed margin between them, even at different screen sizes. I want it so any excess screen width beyond the 300px that the text column takes up and the 40% of the screen that the photo takes up is evenly distributed to the left and right edges of the screen, instead of going in between the two columns. Currently, when I expand the screen all the excess space goes in between the two columns (while I want there to instead be a fixed margin between them and the excess space to go to the edges). What would be the best way to do this? 
I have tried a couple different methods, but here is my code for the closest I have gotten: 
<div class="group">
         <div class="f">
           <h1> Header Here</h1>
           <p>Paragraph with text here. Paragraph with text here.</p>
         </div>
         <img class="pic" src="img/picture.jpg"/>
 </div>

.pic {
  width: 40%;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.f {
  float: left;
  margin: 0;
  padding: 0;
  width: 300px;
  text-align: justify;
  display: inline-block;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

Thanks so much for any help. I've tried floating it, using in-line blocks, and relative/absolute. 

A:

If I understood your question correctly, you want a fixed width between the text and picture? And any extra space evenly spread to the sides?

* {
    margin: 0;
    padding: 0;
    text-align: center;
}
.group {
    display: flex;
    justify-content: center;
}
.f {
    width: 300px;
    height: 200px;
    border: 1px solid black;
}
.middle {
    width: 10%;
}
.pic {
    width: 40%;
    height: 200px;
    background-color: green;
}
<div class="group">
    <div class="f">
        fixed width: 300px;
    </div>
    <div class="middle">
        fixed width: 10%;
    </div>
    <div class="pic">
        fixed width: 40%;
    </div>
 </div>

